如何使用打字稿从 mui 动态加载 mui 图标

Question

我想通过这些片段加载基于字符串参数的 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;

但出现以下错误：

我该如何解决？

Answer 1

你真的调查过吗？ 然而：

https://stackoverflow.com/a/56369445/12637199

import Icon from '@material-ui/core/Icon'

...

render() {
  return (
    <Icon>{props.iconName}</Icon>
  )
}

Answer 2

我遇到了类似的问题，我最终是这样解决的：

import React, { FC } from 'react'
import * as Icons from '@mui/icons-material'

export type IconNames = keyof typeof Icons
export type IconProps = {
  iconName: IconNames
}

export const IconComponent: FC<IconProps> = ({
  iconName,
}) => {
  const Icon = Icons[iconName]
  return <Icon />
}