开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情>>
前言
在项目中会用到很多图标，这些图标通常会使用svg格式的文件。因为svg是矢量图，放大缩小不会影响到图片的质量。而且还可以通过一些css属性来控制图像的特性。尽管svg图片很小，但是每一个svg的引入都会占用一个http的资源，对于前端性能来说也是不能容忍的。因此就有了iconfont，也就是字体图标。
之前我们一直都是使用阿里的iconfont.cn来做自体图标的管理，但是前一段时间，iconfont.cn改版，严重影响到我们开发的工作。因此，我才有了本地svg转iconfont的想法。
经过几天的研究，有了这款通过命令行就能很方便的将svg转换成iconfont的工具：@rasir/symbol-iconfont。
开发思路也是很简单的，读取目标目录下的svg文件，只保留文件中的有效信息，然后用symbol标签包裹，最后将所有symbo放到一个svg下，通过js注入到body中。使用时，通过 use 标签的引用symbol的id就可以了。
在开发中，我们有时候会遇到一个问题，就是在不同的组件引用了同一个iconfont.js，最后重复生成了相同的svg元素。这也是对性能的浪费，所以，我给最外层的svg加了id，避免重复创建。
@rasir/symbol-iconfont
介绍
自动将 svg 文件转成 ionfont.js，并且输出 React 的 Icon 组件，不兼容 IE。
使用方法
npm i @rasir/symbol-iconfont -g
API
--id <id> 父元素id，默认与文件名同名，防止同一个iconfont文件重复创建父元素
-c,--clazz 输出React class组件，默认是输出 React 函数组件
-d,--deep 是否递归目录
-p,--pure 是否去掉颜色
-i,--input <input> 输入路径 默认当前目录
-o,--output <output> 输出路径 默认/dist
-h,--help api说明
-v,--version 版本信息
使用示例
rsicon --id=bdpicon -d -p -i=/asserts -o=/dist
输出结果
dist
Icon
index.tsx --- react 组件tsx
index.less --- react 组件样式 less
iconfont.js --- 包含所有svg信息的iconfont文件
index.html --- iconfont 示例可以点击图标复制type
