小白龙博客

    // 从CDN链接提取font ID的函数
    const extractFontId = (url: string): string => {
      const match = url.match(/font_(\d+)_/);
      return match ? match[1] : ''; // 默认值
    };

    // 初始化iconfont
    async function initIconfont(): Promise<void> {
      try {
        // 从API获取CDN链接
        const res: any = await getAttrConfigDetail('iconfont_url');

        const url = res.data?.value;

        console.log('url', url);

        if (!url) {
          return;
        }

        // 根据CDN链接动态更新iconfontGlobalName
        const fontId = extractFontId(url);
        iconfontGlobalName.value = `_iconfont_svg_string_${fontId}`;

        console.log('fontId', fontId);

        // 动态创建script标签加载iconfont
        const script = document.createElement('script');
        script.src = url;
        script.async = true;

        // 设置script标签id
        script.id = 'iconfont';

        // 监听加载完成事件
        script.onload = () => {
          // 获取图标名称列表
          iconfontIcons.value = getIconfontNames();
          console.log('iconfontIcons', iconfontIcons.value);
        };

        script.onerror = () => {
          console.error('Failed to load iconfont:', url);
        };

        // 添加到head标签;
        document.head.appendChild(script);
      } catch (error) {
        console.error('Error initializing iconfont:', error);
      }
    }

    // 获取iconfont图标名称列表
    const getIconfontNames = (): string[] => {
      const globalName = iconfontGlobalName.value as keyof Window;
      const text = window[globalName] || '';
      return text.match(/(?<=id=")[^"]+(?=")/g) || [];
    };

import SvgIcon from '@/components/SvgIcon/index.vue';
import { ElIcon } from 'element-plus';
import { h, type Component, type PropType } from 'vue';

export default defineComponent({
  name: 'BaseIcon',
  props: {
    name: {
      type: [String, Object] as PropType<string | Component | unknown>
    },
    size: {
      type: [String, Number]
    },
    color: {
      type: String
    }
  },
  setup(props) {
    return () => {
      return h(
        ElIcon,
        {
          size: props.size,
          color: props.color
        },
        () => {
          if (!props.name) {
            return;
          }
          if (typeof props.name === 'string') {
            if (props.name.startsWith('svg-')) {
              return h(SvgIcon, {
                name: props.name.slice(4)
              });
            }
            if (props.name.startsWith('icon-')) {
              return h(
                'svg',
                {
                  ariaHidden: true
                },
                h('use', {
                  'xlink:href': `#${props.name}`
                })
              );
            }
            return h(resolveComponent(props.name));
          }
          return h(props.name);
        }
      );
    };
  }
});