背景：
目前项目icon库的管理较为混乱，视觉设计人员缺少对icon 的集中管理能力（列表查询、新增、修改、删除），项目新增一个icon时， 需要开发人员从figma 视觉稿中一个一个导出新增的svg icon， 手动将其增加到我们处理svg icon的项目中，把它变成内联svg 代码的 Vue 组件，然后发布一个新的icons npm 包版本才可以在项目中使用，过程繁琐，大大降低了开发效率。
解决思路：
加强设计人员对icon 库的管理能力，降低icon库增删查改时，开发人员的手工重复操作，提升开发效率
方案一：
新增一个svg icon 在线管理平台，视觉设计人员可增加/修改/删除 icon，开发人员直接从列表中复制组件代码即可使用
优点：
- 项目更新icon无需发版，设计人员更新即上线
缺点：
- 需要搭建一个svg icon 在线管理平台，前期投入开发成本较大
- 视觉设计人员更新步骤较为繁琐，需要先在figma 上进行设计，然后导出svg文件，提交到icon 在线管理平台上
- 即更即上线带来了一些线上风险，比如视觉设计人员删除了个别icon，导致线上环境获取不到icon 报错
- 可复用性低，当有另外一个平台也需要管理icon 时，需要新增一套前端和后台代码，和上线一个新的平台，可以通过建文件夹区分项目的方式
方案二：
使用figma + gitlab CI 完成SVG图标的完全自动化交付
实现：
-
开发一个figma 插件，完成与icon库 gitlab仓库的绑定，用于从 Master 拉取更新分⽀，和后面提交merge request，（为了可复用到其他项目，提高插件的可复用性，将云桌面项目icons 库的gitlab 仓库地址和 gitlab token 不写死在插件中，而是采用前端表单方式进行提交，并存储在localStorage中）
-
开发一个icons 转换成 vue 组件的仓库，在这里会使用到figma api，获取页面中的svg组件，然后使用svgo 插件精简 SVG 代码，并根据是否被配置为多色图标对 SVG 代码的"fill"等属性进行修改，在这之后采用 Inline SVG 方式生成 Vue 组件）
-
联合视觉，将所有的icon放到figma一个公共模块上，并在完成icon上传时点击发布触发流程提交 merge request，开发合并分支后自动发版，最终开发在项目中更新包版本即可使用。
优点：
- 视觉设计人员更新步骤简单，不用离开自己进行设计工作的平台，直接在figma上进行设计svg icon，然后全部设计完毕，打开插件，填写新的版本号和修改内容，就能一键提交merge request了；
- 更新风险较小，当设计人员更新icon 库，提交merge request后，需要由开发人员合并，并且开发人员需要在项目中进行icon库的更新，按照自测、送测流程才会更新到线上环境
- 可复用性高，当有另外一个平台也需要管理icon 时，只需新增一套前端代码，然后修改figma 文件地址、figma toekn 等配置即可
方案选择：
综上所述，最终选择了方案二
落地成效：
原先开发人员更新icon库流程需要的4步流程，精简为1步（同意merge request），并且从始至终都不需要设计师和开发离开自己熟悉的工作环境，也不需要讲一句话 ，极大地提升了交付效率。