共计 1417 个字符，预计需要花费 4 分钟才能阅读完成。
前言
最近，在我的项目的开发中，咱们布局了一个 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')
}
})
})}