之前我写过一篇关于字体图标库的文章——如何做一个iconfont字体图标管理平台 - 知乎 (zhihu.com)，然后在实际开发中从codesign或者蓝湖下载下来的svg图片上传到图标库后，有一些图标会显示异常。
显示异常的图标
出现这种异常主要是两个原因：
- svg图片中除了path外，还用到了其他形状，比如rect、circle等。
- svg图片中使用了stroke描边属性。
也就是说，svg需要满足只使用path标签且只使用fill填充属性才可以制作字体图标，最好是单一的path路径。
以前遇到这种显示异常，我会自己尝试着手动编辑svg代码，实在修复不好的，就找UI设计师重新上传一下切图，总之很费劲，而且其他开发同事并不清楚问题出在哪里，也不知道如何修复，所以使用svg字体图标就有很大阻力。
既然知道了问题所在，那应该能写脚本来自动修复svg使其符合字体图标的规范，修复也分为两步：
- 将所有其他的标签都改为path
- 将path的stroke属性改为fill属性，并将多个path合并
第一步，我找到了张鑫旭的一个仓库张鑫旭/svg-to-path，支持将rect、circle、ellipse、line、polygon、polyline转为path，感谢大神的分享。
第二步，借助开源库oslllo-svg-fixer，可以实现将svg中的stroke属性改为fill属性，并将多个path合并，需要注意的是，如果某个path同时拥有fill和stroke属性，那么处理时会有异常，我们需要将这个path复制为两个，一个负责fill属性，另一个负责stroke属性，并且多个path的fill或者stroke要改成相同的颜色，然后就可以正常显示了。
修复后的图标
当然有一些特殊场景还是需要手动修改，比如有些svg中使用矩形作为整个图标的背景色，这种情况应该删除这个矩形，否则图标会显示为一个矩形色块；还有一些使用了mask的svg也可能会有异常，需要删除使用mask属性的标签。
