阿里巴巴矢量图标库 (以下称iconfont)提供了方便的图标分享和管理功能,但是由于其图标项目独立于代码仓库,往往导致同一项目更换开发人员之后,接任者不能继续管理原来的图标库,给开发带来各种不便。
由于 iconfont 生成的 svg
文件含有图标路径以及图标名数据,因此 (对于保留了此 svg 文件的项目)可以从此 svg
文件中提取出所有图标,然后上传至图标库,重新构建原来的项目。对于大部分以 font-class
方式引用的图标库而言,新的项目基本可以代替老的项目直接部署到代码中;但对于使用 unicode
方式引用的图标库而言,还需要修改 unicode
才可以部署。
建议使用 windows
,安装支持 ES6+ 的 nodeJs
即可,Linux
下可能需要修改路径的分隔符;
|-- slice-svg.js
|-- iconfont.svg
|-- /output
|-
svgPath
为需要处理的 svg
文件路径;svgTransform
为图表的形变参数,该参数需要在首次生成图标后,对图标进行调整得到。
node slice-svg.js
如脚本运行无误,则运行完毕自动退出运行,此时输出的图标文件在 /output 目录下。
在浏览器中打开任一 svg
查看处理结果,由于 图标项目的形变参数可能与脚本中的不一致 ,需要在浏览器控制台或者其他 svg
编辑器中对图标进行调整,然后将调整时用到的形变参数赋给脚本中的 svgTransform
常量,清空 /output
目录再次运行脚本。
/output
目录下还会生成一个 unicode-map.js
文件,用于映射项目原来的 unicode
与 font-class
,对于使用 unicode
引入图标的项目,这个文件会起到很大作用。