isf：构建工具和方法

前面介绍了我自己是用的图标库，其中简单的介绍了构建方法，这次提供一个构建工具、使用方法以及环境。

isf：意思就是ICON-SF。

环境

为了方便浏览和管理图标需要安装以下两个软件：

SVGExplorer：用于在windows目录中可以直接查看SVG的内容

Adobe Illustrator：用于制作和修改svg文件

安装好上面两个软件后，把svg文件的默认打开方式选择为Adobe Illustrator即可。

如图：

工具

作为前端库，工具当然也是前端，实际上也就一个html文件。

打开工具，只有一个文件选择，如图：

红色区域：文件夹选择

蓝色区域：图例展示区域 

绿色区域：代码区域 

工具的使用

点击选择文件会弹出文件夹选择框，选择存放有svg文件的文件夹后便会将文件夹中的所有svg文件整理并显示。

如图：

注意：chrome下选择文件夹时的选择按钮是【上传】

图标的添加

从阿里图标库下载svg格式，放入同一个目录即可。

工具会将文件名将会转为类名，比如account.svg，在工具整理后就是【.isf-account】，看完成截图的几个红色区域内的字符，都对应文件。

工具中参照阿里图标库的建议使用1024*1024大小的图标。

工具下载

https://download.csdn.net/download/chinaskysun/12536886

码云：https://gitee.com/youmingtang/isf

我对于svg的了解处于最肤浅的阶段，肯定有不足之处，欢迎指正。