在 React 中动态导入 SVG

Question

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

所以每次我需要一个 svg 时，我都需要传递名称“like”而不是从 '../../assets/svg/like.svg' 导入 { ReactComponent as LikeIcon } 以动态导入它

我在这里找到了解决方案：How to dynamically import SVG and render it inline

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

知道为什么吗？

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