⭐️icon页面图标集合生成原理

1. 脚本文件iconInit.js通过读取样式文件icon.scss（包含字体库和各种icon的定义），得到样式节点

2. 然后再遍历样式节点，通过正则匹配，将匹配到icon名称传入到数组中 Ps：.el-icon-add:before => add

3. 最后导出icon.json文件，将icon名称组成的数组写入到../../examples/icon.json中

4. entry.js中将引入icon.json文件，并将其挂载到vue原型链上，然后在icon.md文档中直接通过v-for循环遍历$icon

🍗ElementUI源码

🍗视频讲解：Element-UI 源码架构介绍（0:41:54）

🐾添加过程

进入正题，当想要将iconfont中的图表添加到ElementUI中图标集合时，可以通过以下方法实现：

1. 从iconfont中选择自己想要的图标
2. 将购物车图标代码下载下来

PS：当图标较多或者需要多次添加时可以将购物车中的图标添加到新建项目后再下载代码，以便于修改查阅

3. 通过字体工具软件FontCreator打开项目中原字体文件element-icons.ttf和从iconfont上下载的iconfont.ttf Ps：FontCreator可以对.ttf字体文件中的字体图标进行编辑合并，然后导出对应的字体文件 Ps：也可以直接将字体文件直接拖入软件中

4. 在element-icons中新建图标

剩余的图标添加步骤同上

5. 导出字体文件

6. 将合并后的字体文件重命名（element-icons.ttf、element-icons.woff）后与原项目中的字体文件替换

7. 控制台输入命令node build/bin/iconInit.js，启动脚本文件，重新生成icon.json文件

8. 项目重新启动，完结撒花 🍺🍺🍺