【第2148期】Figma + Gitlab CI 一键交付 SVG 多色图标库

前言

Figma步入大家的视野了。另外流程效率也是一个有意思的着力点，可能大家更关注与下游的合作，忽略了上游。今日前端早读课由@印记中文团队分享。

@赵恒锐，毕业于新加坡南洋理工大学，现 Shopee 金融商家团队前端开发工程师。鸣谢：吴辰沐，毕业于新加坡国立⼤学，现 Shopee 设计师；李成熙， 现 Shopee 金融商家团队前端 Leader

正文从这开始~~

Shopee Iconbot 是一个 Figma 插件，可以直接将现有文件的所有 SVG 图标导出并发布到 NPM 图标库，从而帮助设计师一键完成图标的交付。

痛点

制作这套解决⽅案的原因，是最近团队在开发项⽬ icon 组件库时，与设计师的协同遇到诸多不便。

Figma 设计稿中时常有多达上百个 Icon，按照之前的流程，我们需要将图标⼀个个从 Figma 导出，拷⻉⾄项⽬⾥，并对图标代码依次做⼀些改造，以⽀持⼀些定制的功能（如更换颜⾊等），流程冗⻓⽽复杂。

在后续的更新维护时，我们每次都需要与设计师核对 icon 的增减修改，并对所有更新的 icon 重复上述流程。这显然不是一个高效可持续的合作方式。

已有的解决方案

为了优化这个流程，我和设计师一起考量了市面上现有的图表库解决方案。考量的标准主要有加载速度，项目对图标库的功能要求，和协同的效率。

IconFont

IconFont 将⼀套⽮量图标集以字体⽂件的形式封装，并通过 CSS 的 @font-face 作为 Web Font 调⽤。它的优点是轻量灵活，但一些劣势也很明显。例如 IconFont 一个项目里只⽀持全部单⾊图标或全部多色，不能两者共有。⽽且浏览器会把 IconFont 当做⽂字来对待，⽽⽂字是抗锯⻮的，这就导致有时候⽣成的图形跟预期存在差异。同时 IconFont 对 Figma 直接导出的 svg 的兼容性不好，不支持 svg 里的 fill-rule=“evenodd”，几乎所有的镂空图标都需要设计师特殊处理，增加了很多工作量。

SVG

这时 svg 格式图标⾛⼊我们的视线，它既能满⾜现有图⽚的功能，⼜是⽮量图，访问性也不错，有利于 SEO 和⽆障碍，在性能和维护性⽅⾯也⽐ IconFont 要出⾊。在不考虑 IE8 及以下浏览器兼容的前提下，SVG ⽆疑是当前图标交付格式的最佳选择。在参考了 Juuun ⼤⼤ (Ref:【第1986期】使用 Figma + GitHub Actions 完成 SVG 图标的完全自动化交付)的实现⽅式后，我认为基于这个思路，增加多⾊图标和 Gitlab 的⽀持，并优化⼯作逻辑，即可实现高效图标交付。

⽬前项⽬引⼊ SVG 图标有两种方式，⼀种是 Inline SVG（又称“内联 SVG”，指将 SVG 元素直接嵌入 HTML），另⼀种是SVG Sprite (类似于 CSS 中的 Sprite 技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。一般使用 symbol 元素搭配 use 来准确定位)。⼤量图标在单⻚同时渲染时，SVG Sprite ⽐ Inline SVG 渲染速度更快，但是项⽬中大多数⻚⾯的图标数处于 5 - 15 个之间，此时两者的速度差异微乎其微。但重要的是，SVG Sprite 不⽀持渐变⾊，这个特性在某些项⽬中是必要的，故为了良好的兼容性，我决定采⽤ Inline SVG 作为图标库的构建⽅式。

全新的交付方式：Shopee IconBot

基于我们与设计师合作中的痛点，和对现有的解决方案的调研，我总结优化出了⼀套适用于我们团队项目的 Figma 图标的⾃动化发布流程：Shopee IconBot。从此交付图标不再是件头疼的事，只需设计师轻轻⼀点，Figma ⽂件⾥的 Icon 都将转换为轻巧易⽤的 React 组件并⾃动发布⾄ NPM，发布成功后开发者即可更新依赖并按需引⼊这些组件。除此以外，Shopee Iconbot ⽀持灵活的调整图标的颜⾊和⼤⼩，⽀持多⾊图标，设计师只需根据需求对多⾊图标的⽂件名进⾏配置，即可⽣成多⾊图标组件。

它是如何工作的

Gitlab 的 8.0 版本开始就全⾯集成了 Gitlab-CI， 可以通过编写脚本实现 CI/CD 流程，我们可以轻松地设计⾃⼰的 Pipeline 来实现⾃⼰的⾃动化⼯作流。另外，Figma 提供了⼤量基于 HTTP 的 API 和插件平台，可供⽤户轻松获取 Figma ⽂件中的数据。这使得这套⾼效的交付⽅式成为可能。Shopee IconBot 的工作流程如下图：

当设计师完成图标组件的设计后，打开 Figma 插件，更新版本号并点击发布。插件将⾃动从 Master 拉取更新分⽀，这将触发 Gitlab Pipeline 去获取当前 Figma ⽂件中所有图标并⾃动执⾏脚本处理 SVG ⽂件并转换为 React 组件（在这里会使用到 svgo 插件精简 SVG 代码，并根据是否被配置为多色图标对 SVG 代码的“fill”等属性进行修改。再这之后采用 Inline SVG 方式生成 React 组件）。Pipeline 执行成功后会向 master ⾃动发起 Merge Request，待开发者 Approve MR 之后，master 分⽀将会⾃动执⾏ Gitlab CI 部署 Gitlab Page 并将图标库发布到 NPM。

对比 Juuun 大大的方案，我的这套流程将 Merge Request 放在了获取 SVG 图标之后，这样在审批 MR 的时候开发者能够清楚地知道这次更新对哪些图标做出了改动，以确保图标库的准确性。另外，这套流程中把对 SVG 处理的方式进行了优化，支持多色图标、渐变色图标等。除此以外，Shopee IconBot 插件存储与 Figma 文件关联，支持为不同的文件配置不同的 Gitlab 仓库。

如何使用 Shopee IconBot

在 Figma Community 中下载 Shopee IconBot 插件 (目前插件尚未开源，待功能完善后会对外发布)

设计师在 Figma 文件中精心打磨图标并按要求配置

图标元素需要被设定为 Main Component，大小为40 x 40：

名字以“colored”结尾的图标，将被视作多色图标，颜色信息不会被删除，开发不可以更换图标组件的颜色。

名字不以“colored”结尾的图标，将被视作单色图标，生成组件时会将默认颜色去除，开发根据使用场景自定义颜色。

开发在 Gitlab 中创建图标仓库，将地址和 token 提供给设计师。设计师在 Figma ⽂件中打开 Iconbot 插件，输入图标仓库地址和 Token 后，点击“Next”。

设计师设定版本号并点击“Push to Gitlab”，如果配置了 webhooks 链接会⾃动发送更新提醒

插件将图标自动转换为 React 组件并向图标库 master 分支发起 Merge Request

开发收到 MR 提醒后，对更新的图标进行 Review，Approve 后图标库将自动发布到 NPM 并生成 Gitlab Page。

开发者收到发布成功提醒后，即可使用“npm update”等命令更新图标库。更新后直接引入对应图标即可使用。

如今，我们团队越来越多的项目开始使用这套自动化流程来交付图标，它不仅节约了项目初期搭建图标库的时间，而且为后期的更新维护减少了沟通成本。图标库的更新发布每一个环节都有通知机器人给各方同步，让设计师与开发之间的合作更加顺畅高效。

关于本文 作者：@赵恒锐 原文：https://mp.weixin.qq.com/s/PoTn2ZerkRySJ77Xn2dW1w

为你推荐

欢迎自荐投稿，前端早读课等你来