来自 svg 文件的 require.context 给出不同的结果答案

【问题标题】：require.context from svg file gives different result来自 svg 文件的 require.context 给出不同的结果
【发布时间】：2025-12-25 06:40:11
【问题描述】：

我正在尝试为 svg 图标创建一个反应组件，因此我正在尝试使用 require.context 像这样获取 svg 文件的上下文

const myIcons = require.context('myIcons/', true, /^\.\/.*\.svg$/)
myIcons('./location.svg')

问题是我得到的结果是data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo... 我希望它返回更像<svg ...><path ..></svg> 的东西，就像它在 svg 文件中一样。

我尝试用谷歌搜索，但没有找到任何相关信息。谢谢

【问题讨论】：

fyi 你可能会遇到这个问题：github.com/facebookincubator/create-react-app/issues/517 我们在相同的场景中尝试过 require.context（带有 svg-sprite-loader 的 svg 组件），然后通过索引简单地导出文件.js。它也导致了 Flow 问题

【解决方案1】：

不久前我刚遇到这个问题，我找到了这个用于 webpack 的加载器 https://github.com/webpack-contrib/svg-inline-loader

安装它，然后在模块加载器中定义它

{
  test: /\.svg$/,
  loader: 'svg-inline-loader'
}

【讨论】：

【解决方案2】：

聚会晚了一点，但如果您不想（或无法使用cra 之类的东西），您也可以使用svg-react-loader。（使用 cra 可以轻松设置，也可以不使用）

然后将您的require 语句更改为：

const myIcons = require.context('!svg-react-loader!./myIcons/', true, /^\.\/.*\.svg$/)

【讨论】：

这太棒了，只是使用了@svgr/webpack 而不是已经包含在 CRA 中的 svg-react-loader 我将添加到如何渲染的答案中，尽管在这种情况下是： const Icon =我的图标（路径）。默认值。然后在 render func
@Christian 非常感谢。我也有 @svgr/webpack，但无法正常工作。我错过了.default。谢谢。

【解决方案3】：

所以这是您选择的加载程序的正确行为。它已将其作为 base64 图像导入。您现在可以将它放在源中的图像标签中。

<img src={myIcons('./location.svg')} />

如果您希望它在 SVG 代码本身中加载，您必须找到另一个加载器。我前一阵子遇到了这个问题，我自己也找不到，但是这可能已经改变了。这完全取决于您为什么实际上需要完整的 svg 代码本身。

如果您需要代码，另一种选择是不要将其作为 svg 文件，而是创建一个 React 组件并返回 SVG 代码。

export default () => (
    <svg>....</svg>
)

【讨论】：