mayfly-go/frontend/src/common/utils/svgIcons.ts

import { nextTick } from 'vue';
import * as svg from '@element-plus/icons-vue';
import iconfontJson from '@/assets/iconfont/iconfont.json';
import SvgIcon from '@/components/svgIcon/index.vue';

/**
 * 导出全局注册 element plus svg 图标
 * @param app vue 实例
 * @description 使用：https://element-plus.gitee.io/zh-CN/component/icon.html
 */
export function registElSvgIcon(app: any) {
    const icons = svg as any;
    for (const i in icons) {
        app.component(`${icons[i].name}`, icons[i]);
    }
    app.component('SvgIcon', SvgIcon);
}

// 获取阿里字体图标
const getAlicdnIconfont = () => {
    return new Promise((resolve, reject) => {
        nextTick(() => {
            const styles: any = document.styleSheets;
            let sheetsList = [];
            let sheetsIconList = [];
            for (let i = 0; i < styles.length; i++) {
                console.log(styles[i]);
                if (styles[i].href && styles[i].href.indexOf('iconfont') > -1) {
                    sheetsList.push(styles[i]);
                }
            }
            for (let i = 0; i < sheetsList.length; i++) {
                for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
                    if (sheetsList[i].cssRules[j].selectorText && sheetsList[i].cssRules[j].selectorText.indexOf('.icon-') > -1) {
                        sheetsIconList.push(
                            `${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
                        );
                    }
                }
            }
            if (sheetsIconList.length > 0) resolve(sheetsIconList);
            else reject('未获取到值，请刷新重试');
        });
    });
};

// 获取本地阿里icons
const getLocalAliIconfont = () => {
    return new Promise((resolve, reject) => {
        nextTick(() => {
            const prefix = iconfontJson.css_prefix_text;
            resolve(iconfontJson.glyphs.map((x: any) => prefix + x.font_class));
        });
    });
};

// 初始化获取 css 样式，获取 element plus 自带图标
const elementPlusIconfont = () => {
    return new Promise((resolve, reject) => {
        nextTick(() => {
            const icons = svg as any;
            const sheetsIconList = [];
            for (const i in icons) {
                sheetsIconList.push(`${icons[i].name}`);
            }
            if (sheetsIconList.length > 0) resolve(sheetsIconList);
            else reject('未获取到值，请刷新重试');
        });
    });
};

// 初始化获取 css 样式，这里使用 fontawesome 的图标
const awesomeIconfont = () => {
    return new Promise((resolve, reject) => {
        nextTick(() => {
            const styles: any = document.styleSheets;
            let sheetsList = [];
            let sheetsIconList = [];
            for (let i = 0; i < styles.length; i++) {
                if (styles[i].href && styles[i].href.indexOf('netdna.bootstrapcdn.com') > -1) {
                    sheetsList.push(styles[i]);
                }
            }
            for (let i = 0; i < sheetsList.length; i++) {
                for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
                    if (
                        sheetsList[i].cssRules[j].selectorText &&
                        sheetsList[i].cssRules[j].selectorText.indexOf('.fa-') === 0 &&
                        sheetsList[i].cssRules[j].selectorText.indexOf(',') === -1
                    ) {
                        sheetsIconList.push(
                            `${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
                        );
                    }
                }
            }
            if (sheetsIconList.length > 0) resolve(sheetsIconList);
            else reject('未获取到值，请刷新重试');
        });
    });
};

// 定义导出方法集合
const initIconfont = {
    ali: () => {
        return getLocalAliIconfont();
    },
    ele: () => {
        return elementPlusIconfont();
    },
    // awe: () => {
    // 	return awesomeIconfont();
    // },
};

// 导出方法
export default initIconfont;