如何绘制符合iconfont规范的图标并上传项目

https://www.ui.cn/detail/494247.html

图标作为界面设计中的必要组成部分，现在行业对它的重视度越来越高。目前设计师大多数都是从iconfont上下载修改使用。而有些公司则要求形成自己的统一性的图标库，那么在iconfont上新建并上传项目则成了一项很重要的工作。

因为做这项任务时并没有找到一篇教程教具体我怎么做，过程中还是遇到了很多问题，只能自己不断探索然后把我自己得经验分享一下有什么问题可以大家一起讨论。

1.在iconfont上登录账号并新建项目。

首先登录账号，建议使用公司账户建立一个官方的账号，方便后期人员变动时的管理。目前Iconfont提供三种登录方式，GitHub，内部员工和新浪微博。

然后选择我的项目，点击使用帮助里的图标绘制，下载官方给出的图标模板（1024*1024px）。

https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d68c573b2&helptype=draw

http://pub.mutian.net/storage/668908cb.ai

2.图标绘制。

由于日常工作图标尺寸大小不一，不建议直接在10241024的模板中绘制，以免不好控制图标描边粗细的大小。建议还是根据原始图标的标准尺寸绘制，然后扩展后放大到10241024px在这我用一个3232的图标举例，具体的操作过程。首先，新建一个3232的画板，黄色的参考线是我自己画的，用来规范图标的尺寸和位置，我会分享在文末。然后画好图标以后复制此画板得到一个新的图标，执行对象—路径—轮廓化描边。记得，轮廓化描边后记得用路径查找器的第一个联集将图标合并一下，这样图标得到了扩展，无论怎么放大都会保证描边和圆角等元素的视觉效果。

3.图标导出svg。

接着，保存的工作我觉得有两种方法。

第一种：打开刚刚从iconfont上下载的1024*1024的图标模板，把扩展后的图标复制到里面并且等比例放大到合适的大小，最后存储为-svg。

第二种：由于工作中设计图标的数量很多，单独一个一个保存势必会很耗费时间，因此在这边我认为批量导出比较好。这样就是新建一个文件，里面建立多个1024*1024的画板，把所有扩展后的图标依次复制过来排列好，执行存储为-存储为svg-使用画板-选择你想要导出的范围即可。在这里提示，画板名称前边的数字就是导出时需要填写的画板范围。

4.上传到iconfont的项目里。

后面的工作就比较简单了，点击上传图标到项目，选择刚刚导出的svg文件，点击上传，然后每个单独设置每个图标的名称，标签，是否保留颜色等属性上传即可。