React Iconsでアイコンを利用しよう！！

React Iconsは、様々なアイコンパックを統一された方法でReactプロジェクトに導入できる便利なライブラリです。

Font AwesomeやMaterial Icons、Ant Design Iconsなど、有名なアイコンセットを一貫したインターフェースで簡単に利用できます。

【1】React Iconsのインストール

まず、ReactプロジェクトにReact Iconsをインストールしましょう。
ターミナルで以下のコマンドを実行します。

npm を使う場合

ターミナル

npm install react-icons --save

Yarn を使う場合

ターミナル

yarn add react-icons

【2】React Iconsの使い方

【2-1】アイコンを選ぶ

使用できるアイコンは公式ページで検索できます。

公式：React Icons

【2-2】アイコンをインポート

使用したいアイコンをコンポーネントファイルでインポートします。

例えば、Font Awesomeのビールのアイコンを使いたい場合

JS

import { FaBeer } from 'react-icons/fa';

ここで、FaはFont Awesomeを示しています。

【2-3】アイコンの使用

インポートしたアイコンをコンポーネント内で使用します。

JS

import { FaBeer } from 'react-icons/fa';

function App() {
  return (
    <div>
      <h1>乾杯！ <FaBeer /></h1>
    </div>
  );
}

export default App;

このように記述するだけで、「乾杯！」の横にビールのアイコンが表示されます。

【3】アイコンのカスタマイズ

React Icons は、スタイルの変更も簡単です。

【3-1】アイコンのサイズ・色を設定する

size や color を直接 props で指定できます。

• size：数値（px）や単位付きの文字列（em, remなど）でサイズを変更
• color：CSSで使えるカラー指定（例：red, #333, rgba(...)）

JS

<FaBeer color="goldenrod" size="2em" />

【3-2】アイコンのスタイルを直接設定する

JSX内で style を使って、任意のCSSプロパティを追加できます。

JS

<FaBeer style={{ marginLeft: '10px', transform: 'rotate(15deg)' }} />

まとめ

React Icons を使えば、複数の有名なアイコンセットを、Reactコンポーネントとして統一的に扱えるため、 UIの整合性を保ちつつ、開発効率を大幅にアップできます。

• インストールは npm install react-icons だけ！
• JSXで簡単に表示できる
• サイズ・色・回転・余白などのカスタマイズも自由自在

Webアプリやポートフォリオサイトの「ちょっとした装飾」から、「ナビゲーションやSNSボタン」まで幅広く活用できます。

ぜひ、React開発にアイコンの力を取り入れてみましょう！