javascript - 如何通过字符串动态导入icon/jsx元素？

Question

我目前正在开发图标选择器。一旦选择了图标，选择器就会以字符串形式返回图标，例如 AirBalloon。然后，我想在我的页面上显示该图标，因此我需要导入它(我正在使用 https://www.npmjs.com/package/tabler-icons-react )。 通常，我会这样做 import {AirBallon} from 'tabler-icons-react';。 所以我尝试了这个:

<IconSelector
    active={iconSelectorActive}
    setIcon={setIcon}
    additionalEvent={async () => {
        console.log(icon); // Logs the icon I selected
        setActiveIcon((await import('../../node_modules/tabler-icons-react/dist/icons/' + icon)));
        }}
></IconSelector>

但是如果我尝试将它嵌入到我的 JSX 中:

<Button
    onClick={() =>
        setIconSelectorActive(!iconSelectorActive)
    }
    variant="PRIMARY"
>
    {activeIcon}
</Button>

当我单击选择器中的某个项目时，它会抛出错误错误:找不到模块'./'。

如何解决这个问题？

Answer 1

首先，您需要从库中导入所有图标，如下所示:

import * as allIcons from "tabler-icons-react";

然后使用其名称检索所选图标，如下所示:

const iconNameToBeUsed = "Activity";
const IconToBeUsed = allIcons[iconNameToBeUsed];

最后渲染选定的图标jsx，如下所示:

<IconToBeUsed />

您可以看看this sandbox有关此解决方案的实时工作示例。