在 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' ，這導致了錯誤