组件调用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" />

我不知道如何导入所有图标，以及如何更改我的Icon组件，以适用于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组件来利用Reactchildrenprop，这样你就可以更好地在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'，这导致了错误