使用 iconfont 下载的 svg 图标时，不能更改颜色的解决方法

今天我在使用 Symbol 代码引用图标时发现，设置颜色后，有一部分图标还是显示原始的颜色。是因为这部分 svg 图标带有 fill 属性，这种图标不能本地修改 fill 属性（更新，也可以在 Webstorm 打开 svg 后的以 <? xml 开头的代码中的 path 后找到 fill 属性去掉，也能正常设置颜色，但是 svg 文件数量多时重复操作太多），需要在项目中移除默认颜色。

如下图所示，只有字体变色， svg 图标并没有变色

批量解决方法 1

• 先找到合适的图标，并添加到项目
• 点击批量操作

• 全选，点击批量去色

• 然后下载到本地即可

• 现在可以正常更改颜色

批量解决方法 2

• 首先安装 svgo-loader

yarn add --dev svgo-loader

• 在 vue.config.js 文件中，config.module 代码后加上 svgo-loader 代码( svg 后的 o 是“优化”英文首字母)

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