阿里iconfont审核很慢?自己搭建一个,直接从figma上传


theme: vue-pro

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

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

原来的工作流程

Figma Icons_.png

“宁花机器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

flow.png

方案开源&计划

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

相关的bug与issues可以在这里提出,我们会在闲暇的时间回复/修复相应问题https://github.com/black-golden-road/iconfont-build-tools/issues

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

Figma UpCon
iconfont-build-tools

总结

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

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

Figma Icons new.png

参考链接

figma plugin https://juejin.cn/post/7068160916214251528

得物 IconBot https://juejin.cn/post/7043981084857466893

Shopee IconBot https://juejin.cn/post/6903722152970125326

svgicons2svgfont https://juejin.cn/post/7137111590448398372

iconfont预览 https://segmentfault.com/a/1190000020121850

gitlab figma https://gitlab.com/gitlab-org/gitlab-figma-plugin

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容