注意：
如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高，重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev, 就可能正确显示svg。(vue3.0应该是没有这个问题的)
还有就是可能是创建的icons不在src根目录（2.x最开始我尝试在assets中创建文件来装svg图标，但是并没有显示，换到根目录就正常了,具体应该是那里还是有点问题，3.0正常，按道理讲应该是放到assets中也是可以的以后空了研究暂时这样）
一、安装svg加载插件： npm i svg-sprite-loader -D
二、定义svg组件
<template>
<svg aria-hidden="true">
<use :xlink:href="iconName"/>
</svg>
</template>
<script>
export default {
name: 'icon',
props: {
name: {
type: String,
default: 'home'
}
},
computed: {
iconName () {
return `#icon-${this.name}`
}
}
}
</script>
<style scoped>
svg {
fill: currentColor;
overflow: hidden;
}
</style>
默认属性设置可以根据自己需要设定。
三、在src根目录创建装svg的文件夹并创建index.js文件
文件结构
index.js内容
import Vue from 'vue'
import Icon from '@/components/icon'
Vue.component('icon', Icon)
//定义的一个遍历函数后面会调用
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./', false, /\.svg$/)/* require.context是node的文件加载函数第一个参数是指定的文件路径，
‘./’这个是当前文件路径第二个参数一般默认false就可以了大多数都用不到，
第三个参数是正则匹配你要加载的文件类型 */
requireAll(req)
这个文件没有什么需要处理的基本都是这样写，如果对requireContext不是很理解可以google一下这个requireContext()就知道了。
四、main.js中全局引用组件
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './common/common.scss'
import '@/icons'//引入svg文件
import icon from './components/Icon.vue'//引入写好的组件
Vue.config.productionTip = false
Vue.component('icon', icon)//全局调用
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
五、webkit.base.conf.js规则修改：
添加这部分规则：
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
}
修改规则：
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/icons')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
完成，现在可以全局调用：
<icon name="liked"></icon>
Vue3.0+ts配置（不用ts的话就和2.x相同只是规则写法有点不同，可以直接参考规则写法）
vue3.0+ts无法使用Vue.component()，所以index.ts文件内容有点不同这里直接上代码
index.ts
3.0 版本是可以将svg图片放到assets里面到
然后是main.ts中全局注册
main.ts文件
还有基本配置，3.0是链式配置，并且需要先清楚掉默认到svg规则，不清除是不生效的，（还有是写在vue.config.js的，自己建的文件）
chainWebpack: config => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.test(/\.svg$/)
.include.add(resolve('./src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.tap(options => {
options = {
symbolId: 'icon-[name]'
}
return options
})
}
其它基本是和2.x相同的
（还有resolve这个别忘记定义）
function resolve(dir) {
return path.join(__dirname, dir)
}
