之前在设计团队从蓝湖换到 figma 后,对于切图流程不确定,于是写了一个切图的插件快切。主要作用是,让设计可以在 figma 上一站式交付,不需要再导出图片然后跑到 tinyimage 压缩图片然后上传 cdn,再把 cdn 链接给到开发。其中碰到的问题都已经在png 压缩初探
后续又发生了 iconfont 无法访问的问题,于是打算将 icon 的切图也搬到插件里面,网上找到了两个相关内容使用 Figma + GitHub Actions 完成 SVG 图标的完全自动化交付、Figma + Gitlab CI 一键交付 SVG 多色图标库。但是这里所说的方案都有一个缺点,那就是都是生成的 svg 组件,但是小程序无法使用 svg 组件,我们依然需要将 svg 生成 iconfont。
github 很快能找到一个库svgtofont,使用后基本满足需求。
后续的工作就很简单了,插件中增加一个导出为 svg 功能,在插件中获取选中节点的 svg 数据(可选使用 svgo 压缩 svg)然后调用 gitlab api 创建一个 commit 直接将 svg 提交到仓库中。gitlab 仓库则是配置了 push ci 当分支变动时执行 ci 将 svg 转为 iconfont 然后上传到 cdn 并生成一份 css 即可。
思路看起来很美好,但是实现起来总是坎坷的,碰到了一个 figma 的问题,figma 导出 svg 上传到 iconfont 实心,找到了以下两个解决方案 知乎-figma 导出 svg 上传 iconfont 实心问题解决,【解决方案】figma 导出 svg 不兼容 evenodd 的临时解决方案
但是这两个解决方案都会打断现有上传流程,这是我们不希望看到的,于是找到了以下工具svg-fixer,此工具可以将 svg 转为由 path 组成,大致的原理是先将 svg 转为 png 然后根据 png 再画一个 svg。所以此插件对于一些带有渐变色之类的 svg 应该是有问题的(待验证)。
至此插件切 svg 的新流程就确定了如下所示
至此插件的雏形已经完成,也已经成功交付设计团队使用,但是由于强绑定了 gitlab 以及公司的工程化平台,所以代码没有参考价值,所以就没有开源。如果有需要的话可以在以下 github 中提 issue 后续可以将代码quick-backend-example