svg文件中的require.context提供不同的結果

Question

我正在嘗試為svg Icons創建一個react組件，所以我正在嘗試使用require.context獲取svg文件的上下文

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

問題是我得到的結果為data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo... ，我希望它返回類似<svg ...><path ..></svg>內容在svg文件中。

我試圖用Google搜索它，但是沒有找到任何相關信息。 謝謝

Answer 1

我不久前才遇到這個問題，我找到了這個用於webpack的加載器https://github.com/webpack-contrib/svg-inline-loader

安裝它，然后在模塊加載器中定義它

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

Answer 2

晚會晚了一點，但是如果您不想（或不能導致使用cra等東西），也可以使用svg-react-loader 。 （易於安裝，無需安裝）

然后將您的require語句更改為：

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

Answer 3

因此，這是您選擇的裝載程序的正確行為。 它已將其導入為base64映像。 現在，您可以將其放在源中的圖像標簽中。

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

如果您希望將其加載到SVG代碼本身中，則必須找到另一個加載器。 我前一段時間碰到了這個，自己也找不到，但是情況可能已經改變了。 這完全取決於您為什么真正需要完整的svg代碼本身。

如果需要代碼，另一種選擇是不要將其作為svg文件，而是使用返回的SVG代碼創建一個React組件。

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