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> 
)