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

【问题标题】：Component to call all material-ui Icon in ReactReact中调用所有material-ui图标的组件
【发布时间】：2021-06-08 21:38:34
【问题描述】：

我想实现一个从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}
    )
}

有什么想法吗？

【问题讨论】：

标签： reactjs material-ui react-functional-component

【解决方案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'，这导致了错误

【讨论】：