Vue 中svg修改不了颜色问题

问题：当svg的原文件path 里面有 fill='xxx' 一个颜色时，你后面在style修改color你是改变不了icon颜色，你只有把它删除了才可以，但是我有很多个svg呢？那就很麻烦

解决：

• 下载 svgo-loader

• 打开 vue.config.js，在原来的config.module 后面在加上两行代码

module.exports = {
  lintOnSave: false,
  chainWebpack: config => {
    const dir = path.resolve(__dirname, 'src/assets/icons')

    config.module
      .rule('svg-sprite')
      .test(/\.svg$/)
      .include.add(dir).end()
      .use('svg-sprite-loader').loader('svg-sprite-loader').options({ extract: false }).end()
       //在加上后面的两行代码
      .use('svgo-loader').loader('svgo-loader')
    	// removeAttr 删除属性
      .tap(options => ({ ...options, plugins: [{ removeAttrs: { attrs: 'fill' } }] })).end()
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{ plainSprite: true }])
    config.module.rule('svg').exclude.add(dir)
  }
}