SAMURAI TERAKOYA

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

React.js
2022.12.21

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

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

  1. Reactの環境を準備する
  2. Marerial UIを導入
  3. Material Iconsの導入
  4. Material Iconsの使い方
    1. サンプルコード : 実行例(完成例)
    2. フォルダの構成
    3. 使うiconをApp.jsでimportする
    4. CSSを記述
    5. 実行結果
  5. まとめ

Reactの環境を準備する

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

React + JavaScript - 開発環境構築方法(Windows & Mac)
これからReactの学習を始めていかれる方必見！本記事では、WindowsもしくはMacのPC上にReact + JavaScriptの開発環境構築をする方法についてご紹介しております。Node.jsの準備から動作の確認までまとめてますので参考になれば嬉しいです。
utubou-tech.com
2022.12.14
私は、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...
mui.com

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

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

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

Material UI(MUI)_Reactへ導入

 

 

Material Iconsの導入

公式ページ ↓

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

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

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

npm install @mui/icons-material

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

Material icons_Reactへ導入

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

 

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

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

Material Iconsの使い方

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

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内の赤枠の部分を削除しましょう。

React_index.js_ファイル整理

 

 

使うiconをApp.jsでimportする

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

Material Icons上のアイコンをimport
  • ①
    公式ページを開く

    まずは、こちらからMaterial Iconsの公式ページを開きましょう。

    Material Icons_公式ページ

  • ②
    Twitterのアイコンを検索

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

    Material Icons_icon検索

  • ③
    Twitterアイコンのimport文をコピー

    検索結果としてTwitterが出てきたらクリックしましょう。すると以下のような画面が出てきますので、赤枠のimport文をコピーしてください。

    Material icons_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;
}

実行結果

上記のようにコードが準備出来たら、ターミナル上で以下のコマンドを実行し、アプリケーションを起動しましょう。

npm start

以下のように画面に表示されたら作業完了です！お疲れ様でした。

Material icons_サンプルコード_完成例

まとめ

  1. Material UIとは、UIフレームワークの一つである。
  2. Material Iconsでは、2000件以上のアイコンが公開されている。
  3. Material Iconsで公開されているアイコンは、コンポーネントとして提供されている。アイコンごとのimport文をコピー&ペーストして使う。
  4. Material UIは、React.jsを使っているプロジェクトで活用されることが多い。

コメント

タイトルとURLをコピーしました