前言
最近，在项目的开发中，我们规划了一个 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')
}
})
})
}
复制代码获取 Element Plus 图标的名称列表
在实现Icon组件时，我们已经导入和注册了所有的 El 图标到项目内，此时可以直接通过：注册组件时的类似方法获取到图标名称列表，我们在/src/utils/iconfont.ts文件中，定义了一个获取El图标名称列表的函数：
import * as elIcons from '@element-plus/icons-vue'
export function getElementPlusIconfontNames() {
return new Promise<string[]>((resolve, reject) => {
nextTick(() => {
let iconfonts = []
const icons = elIcons as any
for (const i in icons) {
// 为图标统一了前缀：el-icon-
iconfonts.push(`el-icon-${icons[i].name}`)
}
if (iconfonts.length > 0) {
resolve(iconfonts)
} else {
reject('No ElementPlus Icons')
}
})
})
}
复制代码获取 FontAwesome 和 Iconfont 图标的名称列表
FontAwesome和Iconfont的图标，都是通过css加载而来的，所以，第一步，我们要读取到css资源的内容，/src/utils/iconfont.ts文件中，getStylesFromDomain()函数，用于获取当前页面中从指定域名加载到的样式表内容：
/*
* 获取当前页面中从指定域名加载到的样式表内容
* 样式表未载入前无法获取
*/
function getStylesFromDomain(domain: string) {
let sheets = []
const styles: StyleSheetList = document.styleSheets
for (const key in styles) {
if (styles[key].href && (styles[key].href as string).indexOf(domain) > -1) {
sheets.push(styles[key])
}
}
return sheets
}
复制代码实现了此函数之后，我们可以开始利用正则等，将FontAwesome和Iconfontcss样式表中的所有图标名称匹配出来，FontAwesome和Iconfont的css样式表格式是不一样的，所以需要分别实现解析图标名称，部分图标是拥有别名的，也就是同一图标，有两个名字，我们需要对此类图标进行过滤，具体实现如下：
FontAwesome
export function getAwesomeIconfontNames() {
return new Promise<string[]>((resolve, reject) => {
nextTick(() => {
let iconfonts = []
let sheets = getStylesFromDomain('netdna.bootstrapcdn.com/font-awesome/')
for (const key in sheets) {
let rules: any = sheets[key].cssRules
for (const k in rules) {
if (rules[k].selectorText && /^\.fa-(.*)::before$/g.test(rules[k].selectorText)) {
if (rules[k].selectorText.indexOf(', ') > -1) {
let iconNames = rules[k].selectorText.split(', ')
iconfonts.push(`${iconNames[0].substring(1, iconNames[0].length).replace(/\:\:before/gi, '')}`)
} else {
iconfonts.push(`${rules[k].selectorText.substring(1, rules[k].selectorText.length).replace(/\:\:before/gi, '')}`)
}
}
}
}
if (iconfonts.length > 0) {
resolve(iconfonts)
} else {
reject('No AwesomeIcon style sheet')
}
})
})
}
复制代码Iconfont
export function getIconfontNames() {
return new Promise<string[]>((resolve, reject) => {
nextTick(() => {
let iconfonts = []
let sheets = getStylesFromDomain('at.alicdn.com')
for (const key in sheets) {
let rules: any = sheets[key].cssRules
for (const k in rules) {
if (rules[k].selectorText && /^\.icon-(.*)::before$/g.test(rules[k].selectorText)) {
iconfonts.push(`${rules[k].selectorText.substring(1, rules[k].selectorText.length).replace(/\:\:before/gi, '')}`)
}
}
}
if (iconfonts.length > 0) {
resolve(iconfonts)
} else {
reject('No Iconfont style sheet')
}
})
})
}
复制代码图标选择器
至此，我们已经能够获取到四种图标库中所有图标的名称列表，接下来，只需要利用Icon组件，将所有图标渲染出来即可，以下图标选择器组件省略了样式代码，只演示和实现了获取所有图标的名称和渲染的办法，完整代码在文末提供。
<template>
<div
class="icon-selector-item"
:title="item"
v-for="(item, key) in fontIconNames"
:key="key"
>
<Icon :name="item" />
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { getAwesomeIconfontNames, getIconfontNames, getElementPlusIconfontNames, getLocalIconfontNames } from '/@/utils/iconfont'
const state = reactive({
iconType: '',
fontIconNames: [],
})
const onChangeIconType = (name: IconType) => {
state.iconType = name
state.fontIconNames = []
if (name == 'ele') {
getElementPlusIconfontNames().then((res) => {
state.fontIconNames = res
})
} else if (name == 'awe') {
getAwesomeIconfontNames().then((res) => {
state.fontIconNames = res.map((name) => `fa ${name}`)
})
} else if (name == 'ali') {
getIconfontNames().then((res) => {
state.fontIconNames = res.map((name) => `iconfont ${name}`)
})
} else if (name == 'local') {
getLocalIconfontNames().then((res) => {
state.fontIconNames = res
})
}
}
</script>
复制代码完整代码
支持四种图标的 Icon 组件和 图标选择器组件 ，是为BuildAdmin实现的，所以可以直接在仓库中找到组件的完整代码，另外我们还实现了CRUD代码生成，内置WEB终端，基于ThinkPHP6+Vue3(setup)+Vite+Pinia等，免费开源，无需授权即可商用，欢迎大家体验和提出意见建议。
