1、安装svg-sprite-loader
npm i svg-sprite-loader
2、webpack配置(vue-cli2)（build/webpack.base.conf.js）
使用 webpack 的 exclude 和 include
{test: /\.svg$/,loader: 'svg-sprite-loader',include: [resolve('src/icons')],options: {symbolId: 'icon-[name]' //指定symbolId,不指定则默认为svg文件名}}{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',exclude: [resolve('src/icons')],//不需要使用改loader处理icon,让svg-sprite-loader来处理options: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}},
3、创建icon组件
<template><svg :class="svgClass"aria-hidden="true"><use :xlink:href="iconName"></use></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>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>
4、创建icons文件夹存放svg,同时注册组件
index.js代码如下：
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' //引入svg组件
Vue.component('svg-icon', SvgIcon) //全局注册svg-icon
const req = require.context('./svg', false, /\.svg$/)//遍历require.context的返回模块并导入
const requireAll = requireContext => requireContext.keys().map(requireContext)//import所有符合条件的svg 三个参数：文件夹、是否使用子文件夹、正则
requireAll(req)
5、在页面中使用
（1）在main.js中引入
import './icons'
（2）在页面直接使用svg-icon组件
<svg-icon icon-class="youzi"></svg-icon>