React组件库使用SVG Sprite方案Safari报Unsafe attempt to load URL错误如何解决

核心原因 #

Safari存在长期的特性限制：不支持<use>标签引用跨源的外部SVG资源，其中就包括data:image/svg+xml协议的资源，这和你的业务逻辑、构建配置没有关系，是浏览器原生兼容性问题。

以下是完全符合你「图标内联到JS产物、不依赖服务端静态资源」核心需求的可落地方案，不需要改用svgr查找表的复杂构建流程：

首选方案：运行时全局注入SVG Sprite #

这个方案是业内组件库实现SVG Sprite的通用标准方案，兼容性覆盖所有主流浏览器，实现成本极低。

1. 调整Rollup配置 #

把SVG文件的导入规则从生成data URI改为导出原始文本内容：

import string from 'rollup-plugin-string';

export default {
  plugins: [
    esbuild({
      sourceMap: false,
      target: "esnext"
    }),
    // 仅处理非SVG格式的图片资源
    image({ exclude: ['**/*.svg'] }),
    // 匹配SVG文件，导入时返回原始字符串
    string({ include: ['**/*.svg'] }),
    svgicons({
      inputFolder: "src/icons",
      output: "public/sprite.svg"
    }),
    json()
  ]
}

2. 改写Icon组件逻辑 #

新增一次性全局Sprite注入逻辑，直接用ID引用图标，完全避免外部资源调用：

import spriteRaw from './public/sprite.svg';

// 全局标记避免重复注入
let hasInjectedSprite = false;
// 可选：给Sprite容器加唯一ID，避免同个组件库多版本重复注入
const SPRITE_CONTAINER_ID = 'your-lib-name-icon-sprite';

function Icon({ name }) {
  // 仅在客户端执行注入逻辑，兼容SSR场景
  if (typeof window !== 'undefined' && !hasInjectedSprite) {
    // 先判断是否已经存在同ID的容器
    if (!document.getElementById(SPRITE_CONTAINER_ID)) {
      const container = document.createElement('div');
      container.id = SPRITE_CONTAINER_ID;
      container.style.display = 'none';
      container.innerHTML = spriteRaw;
      document.body.appendChild(container);
    }
    hasInjectedSprite = true;
  }

  return (
    <svg className="svg-wrapper">
      <use href={`#${name}`} />
    </svg>
  );
}

方案优势 #

• 100%兼容Chrome、Safari、Firefox等所有主流浏览器，无跨源错误
• 完全保留现有Sprite构建流程，不需要调整图标生成规则
• 所有图标依然内联在JS产物中，不需要额外部署静态资源，不受服务端环境限制
• 全局仅注入一次Sprite，性能开销可以忽略不计

备选方案（无全局DOM污染需求） #

如果你的场景不允许在全局DOM注入元素，可以选择把对应图标的内容直接内联到Icon组件中：借助SVG Sprite插件的运行时导出能力，每个图标按需导入单独的符号内容，直接渲染到当前SVG的defs中，不过实现复杂度比首选方案稍高，常规场景下优先选择全局注入方案即可。

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