import { nextTick } from 'vue'; import * as svg from '@element-plus/icons-vue'; // 获取阿里字体图标 const getAlicdnIconfont = () => { return new Promise((resolve, reject) => { nextTick(() => { const styles: any = document.styleSheets; let sheetsList = [] as any[]; let sheetsIconList = [] as any[]; for (let i = 0; i < styles.length; i++) { if (styles[i].href && styles[i].href.indexOf('at.alicdn.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('.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('未获取到值,请刷新重试'); }); }); }; // 初始化获取 css 样式,获取 element plus 自带 svg 图标,增加了 ele- 前缀,使用时:ele-Aim const getElementPlusIconfont = () => { return new Promise((resolve, reject) => { nextTick(() => { const icons = svg as any; const sheetsIconList = [] as any[]; for (const i in icons) { sheetsIconList.push(`ele-${icons[i].name}`); } if (sheetsIconList.length > 0) resolve(sheetsIconList); else reject('未获取到值,请刷新重试'); }); }); }; // 初始化获取 css 样式,这里使用 fontawesome 的图标 const getAwesomeIconfont = () => { return new Promise((resolve, reject) => { nextTick(() => { const styles: any = document.styleSheets; let sheetsList = [] as any[]; let sheetsIconList = [] as any[]; for (let i = 0; i < styles.length; i++) { if (styles[i].href && styles[i].href.indexOf('font-awesome') > -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 ) { if (/::before/.test(sheetsList[i].cssRules[j].selectorText)) { sheetsIconList.push( `${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}` ); } } } } if (sheetsIconList.length > 0) resolve(sheetsIconList.reverse()); else reject('未获取到值,请刷新重试'); }); }); }; /* * 获取本地自带的图标 * /src/assets/icons文件夹内的svg文件 */ const getLocalIconfontNames = () => { return new Promise((resolve, reject) => { nextTick(() => { let iconfonts: string[] = []; const 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'); } }); }); }; /** * 获取字体图标 `document.styleSheets` * @method ali 获取阿里字体图标 `` * @method ele 获取 element plus 自带图标 `` * @method ali 获取 fontawesome 的图标 `` */ const initIconfont = { // iconfont ali: () => { return getAlicdnIconfont(); }, // element plus ele: () => { return getElementPlusIconfont(); }, // fontawesome awe: () => { return getAwesomeIconfont(); }, local: () => { return getLocalIconfontNames(); }, }; // 导出方法 export default initIconfont;