如何像FontAwesome library.add(...)那样全局加载自定义SVG图标

完全可以实现，这套全局单次加载的逻辑不是FontAwesome独有的，本质就是维护一个全局单例的图标缓存注册表，几十行代码就能给自行下载的SVG图标复刻出和library.add()完全一致的使用体验。

FontAwesome的library.add()本质没有黑魔法：它只是把传入的图标路径、viewBox等元数据存到了全局唯一的Map结构里，渲染图标时只需要传入图标名，就从这个全局缓存里捞对应的数据拼接成SVG输出，全程不需要重复引入图标文件。这套逻辑对自定义SVG完全适用。

• 预处理自定义SVG资源
  先把所有收集到的自定义SVG做统一格式化，提取每个SVG的viewBox属性、内部path内容，整理成「图标名-图标元数据」的键值对映射。如果图标数量多，完全可以写个简单的node脚本，在项目构建时自动遍历存放SVG的目录，批量读取文件、提取字段生成映射表，不需要手动逐个修改。
  预处理后的映射结构参考：

  // 这部分数据只需要在项目入口引入一次
  const baseIconMap = {
    "custom-home": {
      viewBox: "0 0 24 24",
      path: "<path d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/>"
    },
    "custom-user": {
      viewBox: "0 0 24 24",
      path: "<path d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/>"
    }
    // 其余自定义图标按相同格式整理即可
  }
  

• 实现全局注册方法
  写一个全局单例的图标注册表，实现和library.add()完全一致的注册逻辑，支持初始化批量注册、后续动态追加图标：

  // 全局唯一的图标注册表
  const IconRegistry = {
    iconCache: { ...baseIconMap },
    // 对标FontAwesome的library.add方法
    add(...iconList) {
      iconList.forEach(icon => {
        if (icon?.name && icon?.viewBox && icon?.path) {
          // 已经注册过的图标直接跳过，避免重复覆盖
          if (!this.iconCache[icon.name]) {
            this.iconCache[icon.name] = {
              viewBox: icon.viewBox,
              path: icon.path
            }
          }
        }
      })
    },
    // 内部调用：根据图标名取元数据
    getIcon(iconName) {
      return this.iconCache[iconName] || null
    }
  }
  
  // 挂到全局供所有模块调用，用框架的话也可以导出为ES模块单例
  window.$iconRegistry = IconRegistry
  

• 封装通用图标组件
  写一个全项目通用的图标渲染组件，不管在哪个页面用图标，只需要传入图标名，组件自动从全局注册表拉取对应数据渲染，不需要每个业务模块单独引入SVG文件。以React为例的参考实现：

  // 全项目复用的通用图标组件
  function SvgIcon({ name, size = 24, color = "currentColor", className = "" }) {
    const iconConf = window.$iconRegistry.getIcon(name)
    if (!iconConf) return null
    return (
      <svg
        width={size}
        height={size}
        viewBox={iconConf.viewBox}
        fill={color}
        className={className}
        dangerouslySetInnerHTML={{ __html: iconConf.path }}
      />
    )
  }
  

  Vue、原生JS项目的实现逻辑完全一致，只是组件语法有区别。
• 入口单次初始化
  只需要在项目入口文件（比如main.js）一次性引入预处理好的图标映射表，完成全局注册，之后整个项目任意位置调用图标，直接使用通用组件传入图标名即可，全程只会在初始化时加载一次图标资源，和FontAwesome的使用体验没有区别。

如果是纯静态页面、没有前端构建环境，可以直接用SVG Sprite方案实现同等效果：把所有自定义SVG合并到一个SVG文件中，每个图标用<symbol>标签包裹并设置唯一id，将这个合并后的SVG隐藏在页面body的最顶部，后续任意位置调用图标只需要写<svg><use href="#图标id" /></svg>即可，同样是单次加载资源、全局任意位置可用。

• 不需要首屏展示的图标可以做动态注册：第一次调用对应图标时再异步加载SVG元数据、注册到全局缓存，后续再次调用直接读缓存，不会重复发请求。
• 可以给注册表加类型校验、图标不存在的告警提示，方便开发阶段排查问题。

内容的提问来源于stack exchange，提问作者dankoiDev