Material UIのアイコンを入力とか、データループとかから動的に作成する

サイドバーのデータを表示する例


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

interface route {
icon: keyof typeof Icons;
title: string;
to: string;
}

const datas: route[] = [
{
icon: ‘Home’,
title: ‘ホーム’,
to: ‘/home’,
}
]

function Sidebar(){
return (

• {datas.map((data, index) => (
  • {React.createElement(Icons[data.icon])}

))}

)
}

`import * as Icons from ‘@material-ui/icons/’`で
モジュールのコンテンツすべてをインポートしています。[参考](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import#import_an_entire_modules_contents)

あとは、データをループして`React.createElement`でReact要素で対象のアイコンを作成しています

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

高橋 元希

最新記事 by 高橋 元希 (全て見る)

• TS + React + Material UIで動的にMaterialアイコンを表示する - 2021年8月2日