【React・Material UI】アイコン一覧のindex.jsを作ると便利

【React】アイコン一覧のindex.jsを作ると便利

結論

• フロント側で使うアイコン(Material UI)を都度直接定義することも可能
• ただアイコンをまとめた一覧のindex.jsを定義しておくと便利
  • プロジェクトでそのアイコンに対してデフォルトスタイルを当てたい場合などに使える

実装の仕方（サンプル）

①アイコンを一括定義するためのindex.jsを作成

1. components配下にIconsフォルダ作成
2. Iconsフォルダの下に、アイコンを一括で定義するためのindex.jsを作成

$ mkdir -p src/components/Icons
$ touch src/components/Icons/index.js

②index.jsに各種アイコンを定義

1. アイコンをMaterial UIからimport
2. さらにそのままexport

export { default as LocalMallIcon } from '@material-ui/icons/LocalMall';
export { default as QueryBuilderIcon } from '@material-ui/icons/QueryBuilder';
// 必要な分だけ全て定義　＆　新たにアイコンを追加する際もここへ

③コンポーネントからアイコンを使うとき

• 以下のようにコンポーネントに書くことで、使用できます。

import { LocalMallIcon } from '../components/Icons';