在React中动态导入SVG

Question

我正在尝试动态地在我的React组件中导入SVG。因此，我需要传递名称“like”作为参数来动态导入SVG，而不是每次都使用import { ReactComponent as LikeIcon } from '../../assets/svg/like.svg'。

我在这里找到了一个解决方案：如何动态导入SVG并将其呈现为内联元素，它很有效，但是当我进行build（npm run build）时，无法找到SVG。你有什么想法是为什么呢？

- m_sultan

Answer 1

如果您正在使用 Webpack，您可以使用 require.context：

const svgDir = require.context('../../assets/svg/');

那么：

<img src={svgDir(`./${filename}.svg`)}

作为React组件：

const svgDir = require.context("!@svgr/webpack!../../assets/svg/");

const Icon = svgDir("./Group 9.svg").default

那么：

<Icon />

- lissettdm

---

谢谢你的回答，它让我找到了这个链接：https://dev59.com/qVcO5IYBdhLWcg3weRds如果有人遇到同样的问题并阅读到这篇文章，我使用了第二个答案。 - m_sultan

是的，如果你想将它用作React组件，那么可以使用以下代码：const svgDir = require.context("!@svgr/webpack!../../assets/svg/"); 和 const Icon = svgDir("./Group 9.svg").default - lissettdm