実務の中でどのアイコンを使うか決まっていないコンポーネントを作成する必要があったのでその忘備録です。
イメージとしては新規に作成したアイテムに後からアイコンを紐づける感じです。
この場合、アイコン名が動的の要素となるので<HogeIcon />という呼び出し方が書けませんでした。
代わりの実現方法を調べた結果、モジュールの全てをインポート、動的な値でアクセスしたモジュールをReact.createElement()を使ってReact要素を作成する方法が見つかりました。
- モジュールの全てをインポート
import * as muiIcons from "@mui/icons-material" - モジュールのアクセス
const icon = muiIcons[iconName] - React要素の生成
React.createElement(icon)
実装例
CodeSandboxに実装例を置いています。
ここではセレクトメニューからアイコン名を選び、横の追加ボタンを押すことで選択中のアイコンが追加される例を作成しました。