前言
最近，在项目的开发中，我们规划了一个 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')
}
})
})}
