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

React

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. You will develop ...

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

$ npm install @material-ui/core

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

アイコンを追加する

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

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

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

$ npm install @material-ui/icons

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

React Icon Component - MUI
Guidance and suggestions for using icons with MUI.

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

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 />

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

コメント

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