首先，这是一篇摘抄笔记，具体使用原理等更详细的内容，请参考原作者的 手摸手，带你优雅的使用 icon 。
想要更优雅（偷懒）的在项目中使用svg图标，肯定能想到的就是封装组件，但是光封装组件是不行滴，你还需要:
- 创建结构文件
src/components/SvgIcon/index.vue // 图标组件文件
<template>
<svg :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName"/>
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if(this.className) {
return 'svg-icon' + this.className
} else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
src/icons/index.js // 处理svg文件夹中svg图标，并在Vue上注册全局组件
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
src/icons/svg // svg图标文件存放文件夹，所有下载的svg图标全部放在这个文件中
-
使用 svg-sprite并配置config文件
npm install svg-sprite-loader -D # via yarn yarn add svg-sprite-loader -D配置webpack.base.conf.js中的规则
{ ...其他代码省略 module: { rules: [ ...其他代码省略 { // 这个花括号中都是新增的规则 test: /\.svg$/, loader: 'svg-sprite-loader', include: [path.resolve(__dirname, "../src/icons")], // 确保这个路径正确 options: { symbolId: 'icon-[name]' } }, { // 这个规则中新增了exclude这一行 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, exclude: [path.resolve(__dirname, "../src/icons")], // 确保这个路径正确 use: { loader: 'url-loader', query: { limit: 10000, name: 'imgs/[name]--[folder].[ext]' } } } ] } }最后就可以在其他组件中愉快的使用了：<svg-icon icon-class="star"/>
