共计 2498 个字符，预计需要花费 7 分钟才能阅读完成。
任何的前端组件库，无论是业界内有名的 tdesign，ant-design 还是 element-ui 也好，它们都有着本人的一系列图标。通过察看发现，这些图标都是在组件库公布的时候就曾经根本稳固了，鲜有调整，所以能够始终寄存于组件库的 git 仓库中。
然而咱们以后业务所应用组件库，是依据业务须要逐渐搭建的，外面的图标也在一直地更新。在很长一段时间内，咱们也是采纳让图标入库的形式，随组件库一起保护。设计团队新增的每一个图标，都须要委托组件库开发者让图标入库、提交、发版本、业务侧更新组件库版本。这样的做法所带来的问题，就是操作繁琐，效率低下，还会导致组件库的版本号飞涨，CHANGELOG 简直清一色的“新增一个图标”，不利于整体保护。
为了解决这个问题，一个思路是让组件库和图标库进行解耦，别离保护，用的时候再组合起来。tdesign 就是这么做的：
https://tdesign.tencent.com/v…
但这样也还是有点麻烦，就是图标的 npm 库也是有保护老本的，也是须要设计导出图标当前，增加到 git 仓库并公布；业务侧也要及时去更新图标库。
有没有一种方法，可能把下面所说的这些步骤也省了呢？上面就来开展说说咱们是怎么做的。
解决思路
整体的思路上，也是遵循“解耦”的理念，让组件库和图标库互相独立。首先来剖析一下咱们的业务和图标的关系。
1、在咱们的业务里，图标都是应用的 SVG 格局，是能够放在 CDN 上的。
2、这些图标有着不同的分类，如“根底图标”、“音视频图标”等等。
3、在理论运行的业务中，这些图标根本都会被用到，在此之前也是采纳全量引入的做法，因而能够不思考 tree-shaking。
基于上述三个背景关系，咱们的图标能够依照分类，一片一片地上传到 CDN。
如上图所示，类型为“media”的图标都被汇集在一起，以 JSON 的模式寄存于 CDN。其它类型的图标也以同样的形式寄存。
咱们的组件库是基于 Vue 开发的，当中的图标组件 <q-icon> 通过传入一个 name 显示具体的图标。在组件外部保护了一个 manifest 对象，外面寄存了全副的图标资源。这些图标资源通过动静 import 的形式从 JSON 文件中引入：
async beforeCreate() {for (const cate of iconCates) {const { default: icons} = await import(`./manifest/${cate}.manifest.json`);
this.manifest = {...this.manifest, ...icons};
}
this.getSvgIcon();}能够看到，这里引入的 JSON 文件是寄存于组件库本地的，仿佛也没法克服“图标更新了，组件库也要同时发版本更新”的问题。事实真的如此吗？咱们先临时把这个问题放一放，换个角度先看一下组件库打包当前是什么样子的。
咱们的组件库是基于 Vite 开发的，其打包也是基于此。组件库构建后输入到 dist 目录，来看一眼它都有些什么内容：
能够看到，在代码里通过动静 imoprt 进去的 JSON 文件，在打包后变成了相应的 js 文件。咱们来关上其中的一个：
原来打包工具只是简略地把一个 JSON 文件转化成了导出对象的 js 文件而已。
因为咱们的组件库也是以 npm 包的模式提供给业务侧应用的，意味着业务侧在应用 npm install 装置组件库的时候，实际上也会触发组件库外面的一系列 npm script 生命周期钩子。对于 npm script 生命钩子的内容，能够查看官网文档 https://docs.npmjs.com/cli/v8…，这里节选咱们须要用到一段：
在业务侧执行 npm install 把组件库装置完了当前，会触发组件库外面的 postinstall 钩子。咱们能够在这个钩子里去拉取最新的图标 JSON 文件，编译成 js 后放在组件库正确的目录。通过这个方法，业务侧在装置组件库时，曾经实现了最新的图标库的拉取了。
图标管理系统
在过来，新增的图标须要正确搁置在组件仓库的某个目录中，并且手动改写援用的文件、阐明文档的内容，能力合入主干并且公布，其流程十分繁琐。基于最新的思路，咱们心愿图标能够齐全由设计团队进行保护，无论是新增、批改还是删除，都不须要和组件库有任何交加。基于这个需要，我花了两天工夫搭建了一个图标保护零碎：
设计同学通过拖拽的形式即可实现图标的上传，配合多数的选项，即可把图标提交下来。
这里插播一个很乏味的内容。设计师是通过 Figma 倒出 SVG 图标的，这些图标默认是写死了宽高和色彩。如果间接给到业务侧应用的话是会出问题的。因而在图标提交之前，必须先对它们进行革新，把所写死的属性给删除或者改写。
如图所示，这个 SVG 图标写死了宽高为 12px，色彩为彩色，这几个属性都应该被去掉。为了高效又优雅地解决，我是先把这个图标的 XML 文件解析成 HAST（超文本形象语法树），基于这个 HAST 进行批改后再把它还原成 XML，具体代码如下：
解决完了图标上传的问题后，这套零碎当然也能够用来删除某些图标：
组件库 postinstall 钩子
组件库通过 postinstall 钩子触发脚本拉取最新图标库 JSON 文件的逻辑，并把 JSON 文件编译成 js 文件：
npm script 外面增加一条 postinstall 的命令：
这样在业务侧执行 npm install 的时候，就能拉到最新的图标库资源了。
对于组件库的文档来说，也是实时拉取这些图标的 JSON 文件即可进行展现：
序幕
这套计划说不上多厉害，然而针对咱们的利用场景曾经算是十分不便了。虽说基于业务考量不须要思考 tree-shaking，然而“我能够不必，但你不能没有”，如果能够的话还是心愿能够做到反对 tree-shaking 的，须要再花点工夫钻研下看怎么破。
此外可能还会呈现因为线上批改了图标，导致线下业务受到影响的问题。这个问题倒绝对好解决，只须要做到把图标从文档上去掉，但不是真正的从 CDN 去掉即可。但当初也没这么干，次要是因为保护的人就咱们团队外部，有问题在群里喊一声就行，然而如果这套计划要推广进来的话，还是得做好这些兼容性的计划才行。
写完了，来点赞吧~
