在 React 中调用所有 material-ui 图标的组件

Question

我想实现一个调用material-ui对应图标的组件。我已经在手动调用它时让它工作了。

import MenuIcon from '@material-ui/icons/Menu';
export const Icon = (props) => {
    return (
        <div>
            <MenuIcon/>
        </div>
    )
}

问题是我不知道如何更改所有图标的导入。我想按以下方式调用此组件：

<Icon icon="MenuIcon" className="someClass" />
<Icon icon="LocationOn" className="someClass" />
<Icon icon="Notifications" className="OthersomeClass" />

我不知道如何导入所有图标以及如何更改我的图标组件以适用于 material-ui 包中的任何图标。像这样...

import React from 'react';
import * as IconList from '@material-ui/icons/Menu'; //error

export const Icon = (props) => {
    const {icon, className} = props;
    return (
            <`${icon}` className={className} /> {//error}
    )
}

有什么想法吗？

Answer 1

您应该能够使用命名导入或星形导入 (* as) 导入所有图标。

明星导入应该是这样的

import * as Icons from "@material-ui/icons";

<Icon icon={Icons.Menu} className="someClass" />
<Icon icon={Icons.AccessAlarmIcon} className="someClass" />

命名导入应该如下所示

import { Menu, AccessAlarmIcon } from "@material-ui/icons";

<Icon icon={Menu} className="someClass" />
<Icon icon={AccessAlarmIcon} className="someClass" />

您还可以重构 Icon 组件以利用 React children 属性，这样您就可以更好地在 Icon 组件上组合每个图标。

所以它应该看起来像这样

import React from 'react';

export const Icon = ({ children }) => {
    return (
         <>{children}</>   
    )
}

那你就可以这样使用了

<Icon>
  <Menu className="someClass" />
</Icon>

<Icon>
  <AccessAlarmIcon className="someClass" />
</Icon>

PS:

您的 star 导入来自 '@material-ui/icons/Menu' 而不是 '@material-ui/icons'，这导致了错误

在 React 中调用所有 material-ui 图标的组件

Component to call all material-ui Icon in React

reactjs

material-ui

react-functional-component