SVG 图标无法上色

从阿里矢量图标库下载的图标,以 SVG 的方式引用,遇到无法使用color: #fffff样式上色的情况

思路

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

解决办法

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

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