如何通过字符串动态导入tabler-icons-react的Icon/JSX元素？

错误原因分析 #

1. 模块路径错误：直接手动指定node_modules下的文件路径不符合打包工具的模块解析规则，且tabler-icons-react并未将单个图标组件暴露在dist/icons路径下供单独导入，官方规范是从库根目录导入指定组件。
2. 未正确处理动态导入结果：动态导入返回的是模块对象，而非可直接渲染的React组件，直接将其赋值给activeIcon会导致无法正常渲染。
3. 未做空值校验：当icon为空时，导入路径会变成无效的空路径，触发Cannot find module './'错误。

修正后的代码实现 #

1. 修改动态导入逻辑

<IconSelector
  active={iconSelectorActive}
  setIcon={setIcon}
  additionalEvent={async () => {
    // 先校验图标名称是否有效
    if (!icon) return;
    try {
      // 直接从库根导入，通过解构获取对应图标组件
      const { [icon]: IconComponent } = await import('tabler-icons-react');
      // 将组件转为JSX元素后存入状态
      setActiveIcon(<IconComponent />);
    } catch (err) {
      console.error(`导入图标${icon}失败:`, err);
    }
  }}
></IconSelector>

2. 按钮渲染逻辑

<Button
  onClick={() => setIconSelectorActive(!iconSelectorActive)}
  variant="PRIMARY"
>
  {activeIcon || '选择图标'}
</Button>

额外优化建议 #

可以添加加载状态，避免异步导入过程中页面无反馈：

// 新增加载状态
const [isIconLoading, setIsIconLoading] = useState(false);

// 修改additionalEvent逻辑
additionalEvent={async () => {
  if (!icon) return;
  setIsIconLoading(true);
  try {
    const { [icon]: IconComponent } = await import('tabler-icons-react');
    setActiveIcon(<IconComponent />);
  } catch (err) {
    console.error(`导入图标${icon}失败:`, err);
  } finally {
    setIsIconLoading(false);
  }
}}

// 按钮渲染
<Button
  onClick={() => setIconSelectorActive(!iconSelectorActive)}
  variant="PRIMARY"
>
  {isIconLoading ? '加载中...' : activeIcon || '选择图标'}
</Button>

注意：确保icon的取值与tabler-icons-react的组件名称完全一致（如AirBalloon），大小写敏感，否则会出现组件找不到的错误。

内容的提问来源于stack exchange，提问作者PixelPage