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

React Iconsとは？

React Iconsは、様々なアイコンパックを統一された方法でReactプロジェクトに導入できるライブラリです。
Font AwesomeやMaterial Icons、Ant Design Iconsなど、多くの有名なアイコンセットを簡単に利用できます。

React Iconsのインストール

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

npm install react-icons --save

または、Yarnを使用している場合は：

yarn add react-icons

React Iconsの使い方

React IconsのGitHubから使いたいものを選ぶ！

https://react-icons.github.io/react-icons

アイコンをインポート

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

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

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

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

他のアイコンセットの場合は以下のようになります：

• Ai：Ant Design Icons
• Md：Material Design Icons
• Gi：Game Icons

2. アイコンの使用

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

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

export default Example;

これで、「乾杯！」というテキストの隣にビールのアイコンが表示されます。

アイコンのカスタマイズ

アイコンのサイズや色を変更することも簡単です。

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

• color属性でアイコンの色を指定します。
• size属性でアイコンのサイズを指定します。pxやem、remなどの単位が使用できます。

さらに、スタイルを直接適用することも可能です。

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

まとめ

React Iconsを使うことで、様々なアイコンを簡単にReactアプリケーションに取り入れることができます。

統一された方法で多様なアイコンセットを利用できるため、開発効率が大幅に向上します。