[React] Marerial UI – Material Iconsを導入する方法 + 使い方

Reactの現場でもよく用いられているCSSフレームワークは、BootstrapやBulma…など, UIフレームワークといえば、 Chakra UIやMarerial UIが挙げられます。

今回は、その中でもMarerial UIで用意されているMaterial IconsをReactの環境で導入する手順についてご紹介していきます。サンプルコードも用意してますので、参考にしてみてください。

Reactの環境を準備する
Marerial UIを導入
Material Iconsの導入
Material Iconsの使い方
まとめ

Reactの環境を準備する

Reactの環境構築(手順)については、以下の記事で解説しておりますので、参考にして頂ければと思います。Windows, Mac、どちらのOSでも実際に検証した内容を提供しています。

React + JavaScript - 開発環境構築方法(Windows & Mac)

これからReactの学習を始めていかれる方必見！本記事では、WindowsもしくはMacのPC上にReact + JavaScriptの開発環境構築をする方法についてご紹介しております。Node.jsの準備から動作の確認までまとめてますので参考になれば嬉しいです。

私は、reactMui_Iconsという名前で新規アプリケーションを作成しましたが、別の名前で作成して頂いても何も問題ありません。

※ その他、不明点や問題があれば気軽にお問い合わせください。

Marerial UIを導入

公式ページ ↓

MUI: Move faster with intuitive React UI tools

MUI offers a comprehensive suite of free UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring you...

まずは、Material UI(MUI)を導入する必要がありますので、ターミナル上でReactのアプリケーションフォルダへ移動し、導入に必要なパッケージをインストールしてあげましょう。

cd アプリケーションフォルダ名
npm install @mui/material @emotion/styled @emotion/react

以下、実際にコマンドを実行した例になります。同じような感じになれば正常にインストールが出来てます。

Material Iconsの導入

公式ページ ↓

Material Icons - Material UI

2,100+ ready-to-use React Material Icons from the official website.

Material Iconsには、2000件以上のアイコンが提供されています。いずれもMaterial Iconsが導入されていれば使用が可能なので、とても便利ですね！

こちらもアプリケーションフォルダへ移動出来ていることを確認し、次のコマンドを実行しましょう。

npm install @mui/icons-material

以下、実際にコマンドを実行した例になります。同じような感じになれば正常にインストールが出来てます。

ここまで完了したら、Material UIを使用する準備は終わりです。

今回は、分かりやすいようにあえて分けてインストールを行いましたが、次のようにまとめてインストールすることも可能です。

npm install @mui/material @emotion/styled @emotion/react @mui/icons-material

Material Iconsの使い方

サンプルコード : 実行例(完成例)

Material iconsを用いて次のようなアイコンリストを作っていきます。

フォルダの構成

以下の構成に含まれていないファイル等は、削除しても問題ありません。

reactMui_Icons
  - node_modules
  - public
  - src 
    - App.js 
    - Icons.css : 新規追加
    - index.js
    - index.css
  - package-lock.json
  - package.json

reportWebVitals.jsについては、index.js内のimport文と17行目のreportWebVitals();を消してあげる必要がありますので、ご注意ください。(消さないとエラーが出ます。)

reportWebVitals.jsを削除する前にindex.js内の赤枠の部分を削除しましょう。

使うiconをApp.jsでimportする

Material Iconsで公開されているアイコンを使うためには、アイコンを使いたいファイル上でコンポーネントとしてimportしてあげる必要があります。

Material Icons上のアイコンをimport

①
公式ページを開く

まずは、こちらからMaterial Iconsの公式ページを開きましょう。
②
Twitterのアイコンを検索

公式ページを開き、少しスクロールするとアイコンが検索できるところがありますので、そこで「Twitter」と検索しましょう。
③
Twitterアイコンのimport文をコピー

検索結果としてTwitterが出てきたらクリックしましょう。すると以下のような画面が出てきますので、赤枠のimport文をコピーしてください。
④
App.js内にコピーしたimport文を貼り付ける
App.jsの2行目以降にコピーしたimport文を貼り付けていきましょう。完成例にはinstagramやメールアドレスもありますので、こちらもTwitterのアイコンのimport文をコピーした手順と同じ手順でコピー&ペーストしてください。
```
import React from 'react'
import TwitterIcon from '@mui/icons-material/Twitter';
import InstagramIcon from '@mui/icons-material/Instagram';
import EmailIcon from '@mui/icons-material/Email';
```

⑤

App.js内のコードを書き換え

App.js内のほかのコードも以下のように書き換えましょう。新規でsrcフォルダ直下へIcon.cssを作成し、同じくApp.js内でimportしてください。

import React from 'react';
import TwitterIcon from '@mui/icons-material/Twitter';
import InstagramIcon from '@mui/icons-material/Instagram';
import EmailIcon from '@mui/icons-material/Email';
import "./Icons.css";

const App = () => {
  return (
    <div className='wrap'>
      <div className='icon_area'>
        <TwitterIcon className='icon' />
        <span className='icon_text'>Twitter</span>
      </div>
      <hr />
      <div className='icon_area'>
        <InstagramIcon className='icon' />
        <span className='icon_text'>Instagram</span>
      </div>
      <hr />
      <div className='icon_area'>
        <EmailIcon className='icon' />
        <span className='icon_text'>メールアドレス</span>
      </div>
      <hr />
    </div>
  )
}

export default App;

CSSを記述

以下、今回割り当てているCSSコードです。Icons.css内に記述してください。

.wrap {　　
  margin: 30px;
  width: 30%;
}

.icon_area {
  display: flex;
}

.icon {
  font-size: 30px;
  color: rgb(12, 47, 150);
}

.icon_text {
  margin-left: 10px;
  font-size: 20px;
}