iconfont我们前端都认为挺好用的，但设计师经常说：“这玩意真不好，上传个图标审核半天，审核通过了还不会自动上传😡”

不应该呀，我一看，原来是阿里iconfont管理平台的问题；那简单，我不用它不就行了😎

原来的工作流程

“宁花机器10分钟，不花人工1分钟”，在旧流程中，我们可以看到，人工操作的环节足足有6个（听说阿里icon审核也是人工的）。很显然，这是相当低效的流程。看来，除了阿里第三方的审核问题，我们内部原有的图标交付流程也出现了问题😀

怎么解决

先看看有没有可以直接用的方案

1. 转转的方案 和我们想到一块去了，不使用阿里的iconfont管理平台，而是魔改了YIcon；可惜转转暂时没有开源他们方案的想法，但也给予我们一些思路，我们能不能也学着魔改。

2. 除了YIcon，还有一个开源的iconfont管理平台Nicon。他们的优点都是具有完善的管理&鉴权机制，但缺点是代码过于老旧，长时间没人维护。这也意味着要花费较大的人力要魔改，这对于我们是不能接受的。

3. 很幸运的是，figma社区有较为成熟的Figma图标交付方案figma-icon-automation，看到了Shoppee与得物等公司都参考figma-icon-automation来实现了自己一套的图标交付流程，看起来figma插件是目前最优的选择。可是，我们还是希望保留iconfont的使用方式，不然的话改用SVG组件，这个改变成本也是无法接受的。

   因此，我们决定修改figma-icon-automation的流程，实现适合我们的iconfont交付方案🚀

新的iconfont交付方案

魔改1： github 改为 gitlab

1. 出于保护设计师的资产

我们存储icons到内网部署的gitlab上，保护了设计资产的同时，也自然不会有第三方来审核图标。

1. 出于iconont权限管理

gitlab可对不同项目分配不同权限，我们不再需要一个iconfont平台来管理权限；同时解决了，可能会没有及时回收离职员工的阿里iconfont平台权限所带来的风险。

1. 出于iconfont项目管理

这个与普通的gitlab项目没什么区别，你可以创建多个iconfont项目对应不同前端项目，每个项目都是独立的。

1. 出于iconfont版本管理

得益于git的强大，我们可以还拥有了版本管理，这是阿里iconfont平台没有给我们带来的；我们可以清楚地追溯到是谁修改/删除了图标，或者及时地回滚iconfont版本。

魔改2： 更加好用的figma插件

基于gitlab官方Figma插件，我们对其进行改造（主要因为可以节省查阅Figma API文档的时间），实现了一款更加适合我们的设计师使用的Figma插件————UpCon，主要功能如下：

1. 支持配置自己公司gitlab域名

使用自定义gitlab域名作为请求的BaseUrl来调用gitlab开放的api，默认为v4版api，支持最新版gitlab。

1. 支持配置project-id，支持存储多个id

通过project-id来管理不同项目，并且通过本地storage存储多个project-id，方便用户快速切换项目

1. 支持配置gitlab access token

通过access token来登录gitlab，同时识别该用户是否具有该project对应的开发权限（无权限用户无法跳转到上传页）

1. 支持自定义选择多个Icons，并实时预览

通过在figma中选择要上传的icon（支持frame与component类型），填写本次提交的信息，即可触发上传。

1. 支持去除颜色上传

我们保留了阿里iconfont平台的去除颜色上传功能，其原理是通过正则修改SVG代码中的color属性为currentcolor
选择去除颜色后，当前选择的所有icon都会去除颜色，并可实时预览去除颜色后的效果。

1. 校验icon命名

我们会对已上传的icons名称与当前选择icons名称进行对比，重名的icon，会给予橙色边框与tooltip提示。如果你执意要上传，则会覆盖原先的图标。
与之同时，我们对icon命名进行了强制规范，名称中如含有/\:*?"<>|.字符，会给予红色边框提示，并不允许上传

魔改3： 触发Gitlab CI脚本

在figma插件触发上传后，会生成一次commit记录并同时触发Gitlab CI操作。可以通过clone 我们开源的iconfont-build-tools来实现自定义Gitlab CI操作，iconfont-build-tools的主要功能如下：

1. 处理转换SVG代码为iconfont

我们会读取当前项目下的icons/路径下的所有svg文件（此路径暂不支持修改），将svg代码转换为iconfont.js代码，详细实现代码可查看iconfont-build-tools。

1. 转换svg名称为拼音

我们保留了阿里iconfont平台中，把中文名称自动转为拼音的功能，这一功能大大降低了设计师们的icon命名带来的困扰。

1. 自动生成tag信息并发布新版本

我们还自动把本次git commit的Hash值作为版本tag，并自动发布新版本，这是实现版本管理关键的一步。

1. 自动上传iconfont到CDN

生成的iconfont.js文件可以通过自定义配置来自动上传到自己的CDN，返回的url会自动携带在release信息中，具体的数据格式可查看iconfont-build-tools。

方案开源&计划

目前，我们的方案已经开源了，欢迎大家积极尝试并提出宝贵的建议👍

未来，我们计划给gitlab ci流程中接入微信机器人通知，大家可以持续关注或者star我们的项目😊

Figma UpCon iconfont-build-tools

总结

相比于旧的图标交付流程，新的流程直接把步骤缩减到两步，这大大地提高了我们的效率。而且我们保留许多旧流程的习惯，如依旧使用iconfont方案，upcon中去除颜色功能，build-tools的中文转拼音功能，这些功能的迁移让我们几乎不用花费额外的成本去使用新的流程。

同时我们也希望有更多的用户给予我们正向的反馈，完善此流程，让图标交付变得更简单。

参考链接

figma plugin juejin.cn/post/706816…

得物 IconBot juejin.cn/post/704398…

Shopee IconBot juejin.cn/post/690372…

svgicons2svgfont juejin.cn/post/713711…

iconfont预览 segmentfault.com/a/119000002…

gitlab figma gitlab.com/gitlab-org/…

作者：BlackGoldRoad
来源：juejin.cn/post/7184324458063069245