Vue3中使用各类字体图标的正确姿势:本地SVG、Iconfont、FontAwesome、ElementPlus(图标选择器篇)

·  阅读 1401

前言

最近,在项目的开发中,我们规划了一个 Icon 组件,我们希望通过这个组件,能直接同时使用多种图标库的图标(一种语法,实现无限的图标扩展和高度兼容性)并且,实现该 Icon 之后,理应还有一个图标选择器,可以加载出不同图标库的所有可用图标,方便直接选择使用,完整代码在文末提供

本文续Icon组件篇继续对其中的 图标选择器 进行详细介绍。

web-icon1.gif

我们的IconIcon选择器组件,实现了以下常用图标库的支持,如果还有其它你喜欢的图标库,可以参考我们的实现方式,自行加上即可。

  1. 本地SVG图标:直接将svg文件放入指定的文件夹内,实现自动加载该文件夹所有的svg,并利用Icon组件直接使用,无需手动import
  2. ElementPlus的icon,首先使用官方提供的方法全局注册,然后和Icon组件整合,实现语法的兼容性。
  3. Iconfont(阿里巴巴矢量图标库),实现了自动载入Font clas(css链接,载入后即可通过class来使用对应的字体图标),实现Icon组件的语法兼容性,然后自动解析出Font class内的所有图标名称,以供图标选择器使用。
  4. 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元素类似这样:

svg元素.png

可以看到,我们已经使用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 图标的名称列表

FontAwesomeIconfont的图标,都是通过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
}
复制代码

实现了此函数之后,我们可以开始利用正则等,将FontAwesomeIconfontcss样式表中的所有图标名称匹配出来,FontAwesomeIconfont的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等,免费开源,无需授权即可商用,欢迎大家体验和提出意见建议。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改