在 React 中动态导入 SVG

Question

我正在尝试在我的 React 组件中动态导入 SVG

因此，每次我需要 svg 时，我需要传递名称“like”来动态导入它，而不是每次都执行 import { ReactComponent as LikeIcon } from '../../assets/svg/like.svg'

我在这里找到了一个解决方案：如何动态导入 SVG 并内联渲染它

效果很好，但是当我构建（npm run build）时，找不到 svgs

知道为什么吗？

Answer 1

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

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

然后：

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

作为反应组件：

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

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

然后：

<Icon />