Question

我正在尝试为svg图标创建一个react组件，所以我试图用这样的require.context来获取svg文件的上下文

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

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

我试图谷歌但我没有发现任何相关内容。感谢

Answer 1

我不久前刚遇到这个问题，我发现这个装载机用于webpack https://github.com/webpack-contrib/svg-inline-loader

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

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

Answer 2

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

<div id="{{ $dfpData['advertisers'][0]['id'] }}" class='center-margin' style='height:728px; width:90px; margin-left: auto; margin-right: auto; display: none;'>
    <script>
          googletag.cmd.push(function() { googletag.display('{{ $dfpData['advertisers'][0]['id'] }}'); });
    </script>
</div>

如果你想要它在SVG代码本身加载的地方，你将不得不找到另一个加载器。我曾经遇到过这种情况，我自己找不到一个，但这可能已经改变了。这一切都取决于你为什么真正需要完整的svg代码本身。

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

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

Answer 3

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

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

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

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

3 个答案: