概述

今日使用 svg 图标，修改图标颜色失效，发现svg文件会自带一个 fill 属性，导致颜色修改失效

解决方法

方法一：手动删除每个 .svg 文件的 fill 属性
方法二（一劳永逸）：在 vue.config.js 中配置 loader，让程序自动检查并删除 fill 属性：

.use('svgo-loader').loader('svgo-loader')
            .tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})).end()  // 删除svg默认颜色

注：修改 svg 背景颜色：

1、直接修改 css

.selected {
      fill: currentColor;
      color: $color-dark-green;
    }

2、进入 .svg 文件修改 fill 属性值

fill="##2db970"