前言
最近，在我的项目的开发中，咱们布局了一个 Icon 组件，咱们心愿通过这个组件，能间接同时应用多种图标库的图标（一种语法,实现有限的图标扩大和高度兼容性）并且，实现该 Icon 之后，理当还有一个图标选择器，能够加载出不同图标库的所有可用图标，不便间接抉择应用，残缺代码在文末提供。
本文续Icon组件篇持续对其中的 图标选择器 进行具体介绍。
咱们的Icon和Icon选择器组件，实现了以下罕用图标库的反对，如果还有其它你喜爱的图标库，能够参考咱们的实现形式，自行加上即可。
本地SVG图标：间接将svg文件放入指定的文件夹内，实现主动加载该文件夹所有的svg，并利用Icon组件间接应用，无需手动import。
ElementPlus的icon，首先应用官网提供的办法全局注册，而后和Icon组件整合，实现语法的兼容性。
Iconfont（阿里巴巴矢量图标库），实现了主动载入Font clas(css链接,载入后即可通过class来应用对应的字体图标)，实现Icon组件的语法兼容性，而后主动解析出Font class内的所有图标名称，以供图标选择器应用。
FontAwesome，这是一款很罕用的图标库，蕴含了675个图标，Icon组件实现了主动加载，语法兼容；并且主动解析所有图标名称，以供图标选择器应用。
具体实现
残缺目录构造
├─src
│ │ App.vue
│ │ main.ts
| | vite.config.ts
│ ├─assets
│ │ └─icons 寄存本地SVG文件的文件夹
│ ├─components
│ │ ├─icon
│ │ ├─svg
│ │ │ ├─index.ts 加载本地SVG文件的实现
│ │ │ ├─index.vue svg显示组件的实现
│ │ ├─index.vue Icon 组件的实现
│ │ └─selector.vue 图标选择器组件的的实现
| ├─utils
│ │ ├─iconfont.ts字体图标辅助函数库
│ │ └─common.ts公共辅助函数库
复制代码
本文次要介绍 /src/components/icon/selector.vue 也就是图标选择器的实现。如文首的示意图，图标选择器最难的点，是获取到各个图标库中所有图标的名称，咱们接下来将对此性能的实现，进行具体介绍。
获取本地图标名称列表
在实现Icon组件时，咱们曾经导入了所有的本地SVG文件的内容到我的项目内，导入后，页面退出的svg元素相似这样：
能够看到，咱们曾经应用data-icon-name属性，将所有的图标名称记录了下来，当初只需获取该属性值再进行简略解决即可，咱们在/src/utils/iconfont.ts文件中，定义了获取本地图标名称列表的函数：
export function getLocalIconfontNames() {
return new Promise<string[]>((resolve, reject) => { nextTick(() => { let iconfonts: string[] = [] let svgEl = document.getElementById('local-icon') if (svgEl?.dataset.iconName) { iconfonts = (svgEl?.dataset.iconName as string).split(',') } if (iconfonts.length > 0) { resolve(iconfonts) } else { reject('No Local Icons') } })})}