引入SVG的方法和坑重新启动yarn serve，该loader就可以将字符串的icon变成一个symbol标签。会发

去iconfont.cn下载你要使用的svg，并添加到项目里
在shims-vue.d.ts(我这里是在Vue项目里举例)添加申明

declare module "*.svg"{
    const content:string;
    export default content;
}

安装svg-sprite-loader

    yarn add svg-sprite-loader -D

在vue.config.js添加配置

const path = require('path')
module.exports = {
  chainWebpack: config => {
    const dir = path.resolve(__dirname, 'src/assets/icons')
    config.module
      .rule('svg-sprite')
      .test(/\.svg$/)
      .include.add(dir).end() //包含的目录dir
      .use('svg-sprite-loader').loader('svg-sprite-loader').options({ extract: false }).end()
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{ plainSprite: true }])
    config.module.rule('svg').exclude.add(dir) //其他svg loader排除这个dir目录
  },
 }

重新启动yarn serve，该loader就可以将字符串的icon变成一个symbol标签。

使用icon,只需要在template里面加入如下代码，就会把这个symbol标签插入到svg里面；

<svg>
    <use xlink:href="#ID"/> //ID为要添加的svg文件的前缀 
</svg>

解决svg自带fill填充颜色的问题

安装 svgo-loader

yarn add --dev svgo-loader

在config.module很后面再添加两行配置

.use('svgo-loader').loader('svgo-loader')
.tap(options=>({...options,plugins:[{removeAttrs:{attrs:'fill'}}]})).end()

引用SCSS触发的bug

@import '~@/xxxx/xxxx.scss'

会发现引用不了，经过几番查询，得到问题所在，svg-sprite-loader有bug，查到github.issue，然后找到了别人fork，merge之后自己发布的svg-sprite-loader-mod，最后修复了这个bug。