本文介绍了如何处理从 iconfont 下载 SVG 矢量图，使其可以被 CSS 样式上色。

从阿里矢量图标库（iconfont）下载的图标，以 SVG 的方式引用，有时会遇到无法使用color: #fffff样式上色的情况

思路

1. 观察图标发现，图标本身自带颜色
2. SVG 图是是矢量图，颜色可以在 SVG 文件中定义
3. 默认黑色#00000的图标可以上色

解决办法

修改iconfont.js，正则搜索fill="#[0-9a-fA-F]*"，替换为fill=""。这样即可清除 SVG 本身的颜色信息。

修改后的 SVG 图标，发现可以使用 CSS 样式上色。

解释

在 SVG 中，fill 属性用于描述一个路径或一个形状的颜色，它的优先级高于 CSS 样式。因此把它清除掉就可以被 CSS 处理了。