如何用TypeScript动态加载MUI图标？现有代码报错求修复

问题描述 #

我希望通过字符串参数动态加载MUI图标，编写了如下代码片段：

import Icon from "@mui/icons-material"
import SvgIcon from '@mui/material/SvgIcon';


const IconComponent = (props: typeof SvgIcon & {
    muiName: string;
}) => {
    return Icon[props.muiName]
}

export default IconComponent;

但出现了如下错误：

错误核心原因 #

1. 直接导入@mui/icons-material整体包的方式，TypeScript无法识别字符串索引的合法类型，因为默认导出的图标集合未声明字符串索引签名。
2. 代码直接返回组件构造函数而非组件实例，不符合React组件的渲染逻辑。

修复方案 #

方案1：全量导入+类型约束（适合图标使用频繁的场景） #

import * as Icons from "@mui/icons-material";
import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';

// 约束muiName只能是现有图标名称
type IconComponentProps = SvgIconProps & {
  muiName: keyof typeof Icons;
};

const IconComponent = ({ muiName, ...props }: IconComponentProps) => {
  // 断言图标组件类型并以JSX形式渲染
  const MuiIcon = Icons[muiName] as React.ComponentType<SvgIconProps>;
  return <MuiIcon {...props} />;
};

export default IconComponent;

• 用import * as Icons导入所有图标，让TypeScript能识别所有图标的合法键名
• 通过keyof typeof Icons限制muiName的取值，避免传入不存在的图标名称
• 以JSX形式渲染组件并传递剩余props，符合React渲染规则

方案2：动态导入（适合按需加载、优化打包体积的场景） #

import { useState, useEffect } from 'react';
import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';

type IconComponentProps = SvgIconProps & {
  muiName: string;
};

const IconComponent = ({ muiName, ...props }: IconComponentProps) => {
  const [Icon, setIcon] = useState<React.ComponentType<SvgIconProps> | null>(null);

  useEffect(() => {
    const loadIcon = async () => {
      try {
        // 动态导入指定图标文件
        const iconModule = await import(`@mui/icons-material/${muiName}`);
        setIcon(iconModule.default);
      } catch (err) {
        console.error(`加载图标${muiName}失败：`, err);
      }
    };

    loadIcon();
  }, [muiName]);

  // 加载中可替换为自定义占位组件
  if (!Icon) return null;
  return <Icon {...props} />;
};

export default IconComponent;

• 仅在需要时动态导入对应图标，减少初始打包体积
• 添加异常捕获，避免因图标名称错误导致页面崩溃

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