写这篇文章主要是看到身边的设计师小伙伴使用iconfront还是会遇到一些细节问题，在官方使用文档介绍中，只有基本的绘制方法介绍，其他的相关文章内容都是更偏向于开发人员，对于一些设计师小伙伴来说阅读起来可能会有一些障碍，所以写了这篇文章供大家参考。

简介：阿里妈妈MUX倾力打造的矢量图标管理、交流平台。 设计师将图标上传到 iconfont 平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

---

简单来说就是一个icon图标资源库，里面有各种各样的图标（也有插画），提供给大家使用下载，并且提供SVG、AI、PNG三种图片格式。

这些图标有官方制作的，也有第三方用户自己上传的。

除了图标库这个基础功能之外，还有一个很厉害的能力，就是它可以成为设计师和前端开发工程师的一个协作桥梁。沟通协作的逻辑关系也很简单：

1.设计师/前端开发工程师在iconfont创建一个项目；

2.把参与这个项目的人拉到这个项目的中，成为这个项目的成员；

3.设计师上传SVG文件到这个项目中；

4.开发人员拉取这个项目中的所有图片资源文件在开发工程里面引用。

这样最大的优点就是，不用开发天天找设计师要各个尺寸的切图文件，多个设计师协作的时候，容易出现重复功能的icon，但是样式不一致，导致视觉错乱（其实iconfont对于项目内的图标管理归类做的也挺烂的）。还有一个优点就是可以随时更新已有icon，只需要开发重新拉一下iconfront库，就直接更新啦！

---

正题

这篇文章主要说明，设计师如何使用iconfont（icon图标内容，不包含插画），并且主要聊一下会遇到的一些问题和解决办法。

一、需要下载一个官方的iconfont矢量图标设计模板，地址：图标制作模版.ai，可以去iconfont官网下载；（文末有附件文件下载）

二、用AI打开我们所下载的模版文件，就可以在里面绘制icon了；

重点避坑：

1.必须使用AI进行所有的icon绘制，sketch、XD、等等其他可以导出SVG的软件所导出的svg文件，会出问题而且不容易排查。

2.所有的描边，必须要轮廓化，把所有的描边变为闭合图形。

3.在绘制完成一个icon之后，需要添加一个1024x1024的矩形形状图层，去掉填充和描边，目的是为了保证开发人员在引用你的iconfont的时候，保证你的icon不会被撑大至整个icon区域，保证icon的原有留白。当然，如果说设计师所有的icon都是绘制1024x1024大小的贴边顶格，可以忽略这一条；下面给大家举个例子：

注:灰色为背景区域，如果绘制icon的时候都是无留白，以中间的大小在画布中绘制，可以不添加矩形形状图层。

4.填充只能使用纯色，不支持渐变色（做了也上传不上去，上传上去了也用不了）；

5.官方所说的合并：如果有两个以上图形，或者有布尔关系的图形，请对图形合并并且扩展。这里需要注意的一个点就是，在使用布尔运算后，经常会出现一些空图层，就是在这个图层中有一个闭合形状图层，但是没有描边和填充，但是会导致在上传iconfont的时候，图标显示异常，比如一坨黑。

注：如果不删除上图中的两个复合路径，上传iconfont后，就会显示异常。

三、官方使用说明（点击进入官方使用说明）：包括了绘制图标的规则和制作上传流程。

四、替换iconfont原有icon进行视觉更新：

1. 光标hover至需要更新的icon，点击铅笔icon；

   

   
   

2. 在弹出窗口中点击“点击上传替换icon”；

   
   

   

   
   

3. 选中新制作好的icon，点击打开；

   
   

   
   

4. 最后，点击“仅保存”按钮，即可完成icon更新；

   
   

5. 通知一下前端开发的小伙伴，你更新了iconfont里面的文件，需要更新至你们的产品就可以啦。