SVG Sprite在消费应用中无法正常加载的问题求助

DevOps 小满

2026-4-14

我为所有SVG图标实现了SVG sprite文件生成功能，目前components/icons/sprites/icons.svg文件能正常工作。在我的Index.tsx文件中，代码如下：

import { SvgIcon } from '@mui/material';

<SvgIcon
  viewBox={viewBox}
  sx={sx}
  aria-label={label}
  data-test={dataTest}
  {...rest}
>
  <use xlinkHref={`${sprite}#${iconName}`} />
</SvgIcon>

这段代码在Storybook里完全正常，我确认实现逻辑没问题。在Storybook中查看元素时，它的结构是：

<use xlink:href="static/media/icons.svg#text-aa"></use>

问题出现在打包组件包之后，消费应用无法正确加载图标。我的组件包Webpack配置如下：

{
  test: /components\/icons\/sprites\/icons\.svg$/,
  type: 'asset/resource',
  generator: {
    filename: 'sprites/icons.svg',
    publicPath: '/',
  },
},

同时Webpack的output对象里也设置了publicPath: '/'。

这导致消费应用中的元素变成了：

<use xlink:href="/assets/icons.svg#warning"></use>

但图标完全不渲染。

我检查了node_modules，文件确实存在：node_modules/@company/packageName/dist/assets/icons.svg。在Chrome网络面板中可以看到，浏览器尝试请求/assets/icons.svg，但返回404 Not Found。

当我移除Webpack output中的publicPath: '/'，只保留rules里的配置：

{
  test: /components\/icons\/sprites\/icons\.svg$/,
  type: 'asset/resource',
},

此时消费应用的node_modules里，组件包的dist文件夹中会生成一个带哈希的SVG文件：node_modules/@company/packageName/dist/db6b1fc5dea1759a88ef.svg。

而浏览器中的元素变成了：

<use xlink:href="file:///Users/marcus/Desktop/repos/sso-playground/node_modules/@company/packageName/dist/components/badge/../../db6b1fc5dea1759a88ef.svg#warning"></use>

这时候浏览器报错：

Not allowed to load local resource:

我已经尝试了各种publicPath和filename的组合，打包后的文件路径确实符合配置，但就是无法正常引用。让我困惑的是，我的应用中还有另一个同公司的组件包，同样使用SVG sprite实现图标，消费应用无需额外配置就能正常工作，它的元素标签是这样的：

<use xlink:href="/images/vendor/@company/anotherPackage/components/icons/icons.svg?16c5895e4b93fe53247be390dfbb7ba1#alert-circle"></use>

我到底漏掉了什么？应该怎么做才能让我的图标在消费应用中正常加载？

备注：内容来源于stack exchange，提问作者heisenberg7584