项目中为了体验好、性能优、资源丰富等原因经常会用svg这种矢量图，但是svg不能直接像image标签一样直接使用，这就需要前端的同学自己处理了。
svg有以下优点：

1. svg放大不失真,png，jpg会出现失真现象
2. svg的体积非常小，对有大量图标图片的页面体验友好
3. 图像文件可读，易于修改和编辑
4. svg文件还可嵌入JavaScript脚本来控制svg对象

那这么好的东西怎么在前端vue项目中使用呢？ 下面就来个最佳实践：

1.安装svg-sprite-loader

 npm install svg-sprite-loader

2、webpack 配置（vue.config.js）

chainWebpack: config => {// 别名设置config.resolve.alias.set('@', resolve('src')).set('@assets', resolve('src/assets')).set('@views', resolve('src/views')).set('@components', resolve('src/components')).set('@images', resolve('src/assets/images')).set('@utils', resolve('src/utils'))config.module.rule('svg').exclude.add(path.join(__dirname, 'src/assets/icons/svg')).end()config.module.rule('icons').test(/\.svg$/).include.add(path.join(__dirname, 'src/assets/icons/svg')).end().use('svg-sprite').loader('svg-sprite-loader').options({symbolId: 'icon-[name]',svgo: {plugins: [{removeViewBox: false}]}}).end()},

注意：这里的chainWebpack对象是跟devServer是平级的对象

3、创建、注册和导出svg的组件

1. 创建svg组件：这里我直接在view下面的目录创建了svg组件文件夹，当然你可以选在在common或者components下
   
   代码为：

<template><i v-if="iconFileName.indexOf('el-icon-') === 0" :class="iconFileName" /><svg v-else class="svg-icon" aria-hidden="true" v-on="$listeners"><use :xlink:href="`#icon-${iconFileName}`" /></svg>
</template><script>
export default {name: 'SvgIcon',props: {iconFileName: {type: String,required: true}}
}
</script><style scoped>
.svg-icon {width: 14px;height: 14px;overflow: hidden;/* vertical-align: -0.15em; */fill: currentColor;
}
</style>

2. 注册svg组件：
   
   具体代码如下：

import Vue from 'vue'
import SvgIcon from '@/svgIcon'
Vue.component('svg-icon', SvgIcon)const req = require.context('@/assets/icons/svg', false, /\.svg$/)
const requireAll = requireContext => {// requireContext.keys()数据：svg文件夹下面的requireContext.keys().map(requireContext)
}
requireAll(req)

4、main.js

//引入整个icons,
import './assets/icons/index'

当然你你也可以在main中引入并注册svg组件，我是为了方便维护把功能抽到了icon文件下面了

5、组件中使用

  <svg-icon class="image" icon-file-name="heart"></svg-icon>

组件属性的icon-file-name的值就是svg文件的名字。

好的，就可以方便的使用svg了