导入图像时的 Treeshaking，并想使用 Typescript

Question

我有一个如下所示的组件：

import foo from "./assets/foo.svg"; 
import bar from "./assets/bar.svg"; 

const icons = {foo, bar}; 

type IconTypes = "foo" | "bar"; 

type IconProps = {
    icon: IconTypes; 
}; 


export const Icon = (props: IconProps) => {
    const IconComp = icons[props.icon]; 
    return <IconComp/> 
}

现在，据我了解，这不能正常摇晃。

也就是说，如果我有类似的东西

<App> 
    <Icon icon = "foo"/> 
</App>

然后它将与所有 SVG 捆绑在一起。

我可以直接引用图标：

import FooIcon from "./assets/foo.svg"; 
<App> 
    <FooIcon/> 
</App>

但我不这样做的地方是，我可能有多个其他组件可以选择显示图标，例如带有图标的按钮或带有图标的卡片等。

我宁愿像这样使用这些组件

<Button icon = "foo" /> 
<Card icon = "foo"/> 

如果我在图标名称上打错字，请立即给我输入错误。

另一种方法是传入如下图标：

import FooIcon from "./assets/foo.svg"; 
<Button Icon = {FooIcon}/> 
<Card Icon = {FooIcon}/> 

但我真的不喜欢这样。

有没有办法实现这一点，还是我误解了这里的摇树？

Answer 1

如何使用来自 Webpack 的动态导入？这会是你可以在你的上下文中使用的东西吗？如果配置正确，它可以为每个.svg 生成不同的块，并且仅在使用时下载。 https://webpack.js.org/api/module-methods/#import-1

编辑 另一种选择可能是将实际的 SVG 导入直接作为道具传递给 Icon 组件，就像这样，SVG 只会在使用它们的块中。你必须改变你的道具让 Icon 接受一个对象。