iconfont的symbols文件更新后，icon不能变色问题

问题描述：

我希望通过如下操作改变svg图标的颜色

    <div style="color:green;">
        <icon type="success"></icon>
    </div>

但是这种操作并没有生效。

问题原因：

当从阿里图库中图标被添加至项目，如果编辑过项目图标的颜色或者图标本身是有颜色的，那么在通过symbol获取图标时会在svg的path中增加fill属性，导致无法更改颜色，如果需要动态修改颜色，需要从新添加该图标(本身图标无色)，获取在symbol的js文件中程序删除fill属性。

解决方案

查看了一下symobls.js 确实发先了很多有fill的path属性 根据规则 大概格式如下

<symbol id="xxx">
    <path d="xxxxxx" file="#xxx"></path>
</symbol>

我需要根据这个规则将所有带有fill属性的symbol过滤出来 于是我写了一个node文件对symbols进行过滤

// 用于检查是否有path标签含有fill属性 导致icon颜色不生效问题
const fs = require('fs');

const filePath = process.argv[2] || './symbols.js';

const file = fs.readFileSync(filePath);

const preNamespace = 'icon-';

const MatchSymbolReg = /\<symbol.*?\>.*?\<\/symbol\>/g;

const fillTag = /fill="(.*?)"/;

const MatchIdReg = /id="(.*?)"/;

// 拿到所有带有fill属性的symbol标签
const list = file.toString().match(MatchSymbolReg).filter((item) => item.search(fillTag) !== -1);

// 拿到所有symbol标签的id
const idList = list.map((item) => {
    const m = item.match(MatchIdReg);
    return m && m[1];
}).filter((item) => !!item);

// 去除namesapce
const filterIdList = idList.map((item) => item.replace(preNamespace, ''));

console.log(filterIdList);

然后我就可以在控制台看到所有带有fill的图标的id,告诉ui,去iconfont里将对应的fill去除掉。