解决方法1： 查阅博客后删除svg文件中的fill属性后，可正常显示颜色，博客链接如下

解决方法2： 在vue.config.js中配置一个svg-loader用来自动把fill属性删除掉

代码如下：

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

在vue.config.js中配置webpack代码：

const 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()
            .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract: false}).end()
            // 优化svg , 删除fill
            .use('svgo-loader').loader('svgo-loader')
            .tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})).end()
            // 优化svg
        config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin')), [{plainSprite: true}]
        config.module.rule('svg').exclude.add(dir)
    }
}

注意：该方法需要安装一个loader，安装命令行为

yarn add --dev svgo-loader

svg图标不显示颜色解决方法

2.