方法1：

点击图标如果颜色不改变，可以打开该图标.svg里面有一个fill:xxx将这个属性删除后问题可以解决。

方法2.

下载svgo-loader,在vue.config.js里面加入两条语句 .use('svgo-loader').loader('svgo-loader') .tap(options => ({ ...options, plugins: [{ removeAttrs: { attrs: 'fill' } }] })) 可以帮你自动删除所有svg里面的fill属性
题外话：使用icon时用vue.config.js配置可以使用以下代码： `` onst path = require('path')

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() // 包含 icons 目录
  .use('svg-sprite-loader').loader('svg-sprite-loader').options({ extract: false }).end()
  .use('svgo-loader').loader('svgo-loader')
  .tap(options => ({ ...options, plugins: [{ removeAttrs: { attrs: 'fill' } }] }))
config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{ plainSprite: true }])
config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录

``