在 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 package 中的任何图标。 像这样的东西...

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：

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