很多小伙伴使用iconfont来做为app/网页中的图标，但是这些设计小伙伴使用的是Sketch来进行设计。如果你是用illustrator来进行设计，那么直接生成的svg不会有任何问题，只需要注意以下几点：

1.最好扩展你的图标（转曲）
2.将多个相连的路径合并
3.不要使用剪切蒙版
4.不要使用渐变色

绘制规则：

当然，在sketch做完的图标需要放到Ai中才能生成完好的svg进行上传。这得益于Ai强大的svg兼容性。具体的步骤如下：

一、下载iconfont模版

立即下载

二、在sketch中选中图标，选择复制svg代码

三、打开下载的模版文件

四、cmd+V（ctrl+V）粘贴代码

五、缩放至合适大小

从模版的辅助线中我们可以看出这个辅助线目的是为了每个图标的面积相同，这样的话从视觉观感上来说图标的大小也会趋于一致。

长方形图标示例

纵向图标示例

正方形图标示例

圆形图标示例

六、存储为svg格式

默认的选项就可以

七、上传图标

选择我的项目

选择上传图标至项目

上传svg文件

填写图标信息

图标就上传成功了！

以上就是本教程的全部内容。感兴趣的朋友可以添加收藏并关注公众号：张洪Heo，会有更多设计相关内容在这里。

搞定！是不是很简单~
还有其他问题可以到我的公众号给我留言，如果对这个文章感到问题可以在下方评论。