require.context给出不同的结果

Question

我想，所以我试图让SVG文件的情况下与require.context这样

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

问题是创建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映像。您现在可以将其放置在源代码中的图像标记中。

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

如果你想要它将在SVG代码本身加载的地方，你必须找到另一个加载器。我跑了一会儿，找不到一个人，但可能已经改变了。这一切都取决于你为什么需要完整的svg代码本身。

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

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