xiangyuan-app/src/components/basic/IconUtils.ts

import DefaultIcons from "../data/DefaultIcon.json";

export type IconItem = {
  type: 'iconfont'|'image'|'svg'|'none',
  value: string,
  rawSvg?: string,
  fontFamily?: string,
};
type IconMap = Record<string, IconItem>;


//图标集
const iconMap = {} as IconMap;

export const IconUtils = {
  /**
   * 设置 Icon 组件的图标名称映射。
   * 如果已存在同名数据，则会覆盖之前的。
   *
   * key是图标的名字，value 可以是以下几种情况：
   * * 是一个 iconfont:name 字符，则会渲染为字体形式的图标，通过 : 分割，前面是字体名称，后面是图标名称。
   * * 是一个 `data:***` 或者 http/https URL，则会尝试使用 Image 渲染为图片
   * * 是一个 `&lt;svg` 开头的字符串，会渲染为 svg
   * * 否则，作为默认字体 iconfont 渲染为字体形式的图标。
   */
  configIconMap(map: Record<string, string>) {
    for (const key in map) {
      let result : IconItem;
      const v = map[key];
      if (v.startsWith('http') || v.startsWith('data:') || v.startsWith('/')) {
        result = {
          type: 'image',
          value: v,
        }
      } else if (v.startsWith('<svg') || v.includes('<svg')) {
        result = {
          type: 'svg',
          rawSvg: v,
          value: toDataSvg(v),
        }
      } else if (v.includes(':')) {
        const vv = v.split(':');
        result = {
          type: 'iconfont',
          value: vv[1],
          fontFamily: vv[0],
        }
      } else {
        result = {
          type: 'iconfont',
          value: v,
        }
      } 
      iconMap[key] = result;
    }
  },
  getColoredSvg(svg: string, color: string) {
    return toDataSvg(
      svg.includes('fill=') ? svg : svg.replace(/<path /g, `<path fill="${color}" `)
    );
  },
  /**
   * 获取图标名称映射集
   * @returns
   */
  getIconMap() {
    return iconMap;
  },
  /**
   * 从图标名称映射中获取指定名称的图标数据。
   * @param key 图标名称
   * @returns 返回图标数据，如果找不到，返回 undefined。
   */
  getIconDataFromMap(key: string) {
    return iconMap[key];
  },
}

function toDataSvg(str: string) {
  if (!str.includes('xmlns'))
    str = str.replace("<svg ", "<svg xmlns='http://www.w3.org/2000/svg' ");
  return `data:image/svg+xml,${encodeURIComponent(str.replace(/\'/g, '"'))}`.replace(/\#/g, '%23');
}

IconUtils.configIconMap(DefaultIcons);