【React】初めてのMaterial-UI アイコンを追加する

2022.07.232021.11.04

Material-UIという、ReactのUIを簡単に作れちゃう最も人気のライブラリを初めて使ってみたので使い方をまとめました。

Material-UI の公式ページはこちら

MUI: The React component library you always wanted

MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design.

Material-UI の使用にあたって、アプリのディレクトリ下で、以下をインストールする必要があります。

$ npm install @material-ui/core

このインストールができているかどうかはpackage.jsonファイルで確認が可能。

アイコンを追加する

一番簡単そうなアイコンの追加をやってみます！

Reactデフォルトのこの画面にホームアイコンを追加してみます。

アイコンを追加するためには、アイコン用のインストールが必要です。

$ npm install @material-ui/icons

ライブラリの使用にあたって何をインストールしないといけないかは公式ページのコンポーネントのところに書かれています。

React Icon Component - Material UI

Guidance and suggestions for using icons with Material UI.

デフォルトのコードにアイコン表示用のコードを追加したのがこちら

import React from 'react';
import logo from './logo.svg';
import './App.css';
import HomeRoundedIcon from '@material-ui/icons/HomeRounded';

function App() {
  return (
    <div className="App">
      <header className="App-header">
      <HomeRoundedIcon />
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Reactシンボルの上にホームアイコンを追加することができました。

追加したコードは2行のみです。

importの最後の行に

import HomeRoundedIcon from '@material-ui/icons/HomeRounded';

JSXに

<HomeRoundedIcon />

どう使うかがわかったので、これを応用していけば使いこなせそうですね！