React で @fortawesome/react-fontawesome と react-icons を使って Font Awesome アイコンをレンダリング

2024-05-08

React で Font Awesome アイコンをレンダリングするには、以下の 2 つの方法があります。

@fortawesome/react-fontawesome パッケージを使用する

1 パッケージのインストール

npm install @fortawesome/react-fontawesome

2 アイコンのインポート

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

3 アイコンの使用

<FontAwesomeIcon icon="fa-solid fa-home" />

上記のように、FontAwesomeIcon コンポーネントを使用してアイコンをレンダリングできます。icon プロパティに、使用するアイコンのクラス名を指定します。クラス名は、Font Awesome の公式ドキュメントで確認できます。

react-icons パッケージを使用する

npm install react-icons

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

<FaHome />

上記のように、react-icons パッケージを使用してアイコンをレンダリングできます。FaHome のような記号を使用して、使用するアイコンを指定します。記号は、react-icons パッケージの公式ドキュメントで確認できます。

使用例

以下のコードは、@fortawesome/react-fontawesome パッケージを使用して、Font Awesome の fa-solid fa-home アイコンをレンダリングする例です。

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const App = () => {
  return (
    <div>
      <FontAwesomeIcon icon="fa-solid fa-home" />
      <p>Home</p>
    </div>
  );
};

export default App;

このコードを実行すると、以下の結果が表示されます。

<i class="fas fa-home"></i>
<p>Home</p>

@fortawesome/react-fontawesome パッケージを使用する

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const App = () => {
  return (
    <div>
      <h1>Font Awesome アイコン</h1>
      <FontAwesomeIcon icon="fa-solid fa-home" />
      <FontAwesomeIcon icon="fa-solid fa-envelope" />
      <FontAwesomeIcon icon="fa-solid fa-user" />
    </div>
  );
};

export default App;

<h1>Font Awesome アイコン</h1>
<i class="fas fa-home"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-user"></i>

react-icons パッケージを使用する

import React from 'react';
import { FaHome, FaEnvelope, FaUser } from 'react-icons/fa';

const App = () => {
  return (
    <div>
      <h1>Font Awesome アイコン</h1>
      <FaHome />
      <FaEnvelope />
      <FaUser />
    </div>
  );
};

export default App;

<h1>Font Awesome アイコン</h1>
<i class="fas fa-home"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-user"></i>

説明

@fortawesome/react-fontawesome パッケージと react-icons パッケージの両方を使い、それぞれの利点と欠点を確認することができます。
それぞれのコードは、3 つの Font Awesome アイコン (fa-solid fa-home, fa-solid fa-envelope, fa-solid fa-user) をレンダリングします。
アイコンのクラス名は、Font Awesome の公式ドキュメントで確認できます。
react-icons パッケージを使用する場合は、アイコンの記号を覚えやすいように工夫することが重要です。

応用

このサンプルコードをベースに、以下のことができます。

異なるアイコンをレンダリングする
アイコンの色やサイズを変更する
アイコンをクリックしたときにイベントを発生させる
アイコンをアニメーションさせる

Font Awesome には、500 種類以上のアイコンが用意されています。
React で Font Awesome アイコンを使用することで、Web アプリケーションに視覚的な魅力を追加することができます。

注意事項

このサンプルコードは、あくまでも学習目的で使用してください。
本番環境で使用する場合は、ライセンスを確認の上で使用してください。

その他の Font Awesome アイコンを React でレンダリングする方法

CSS を使用する

Font Awesome アイコンは、CSS で簡単にレンダリングできます。以下の手順を実行します。

アイコンのクラス名を CSS セレクタに使用して、アイコンをレンダリングします。

.icon {
  font-family: FontAwesome;
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
}

.fa-home {
  content: "\f015"; /* fa-solid fa-home の Unicode コードポイント */
}

.fa-envelope {
  content: "\f003"; /* fa-solid fa-envelope の Unicode コードポイント */
}

.fa-user {
  content: "\f007"; /* fa-solid fa-user の Unicode コードポイント */
}

<span class="icon fa-home"></span>
<span class="icon fa-envelope"></span>
<span class="icon fa-user"></span>

使用するアイコンの SVG ファイルをプロジェクトに追加します。
SVG ファイルを <img> タグを使用してレンダリングします。

<img src="path/to/fa-solid-fa-home.svg" alt="Home icon" />
<img src="path/to/fa-solid-fa-envelope.svg" alt="Envelope icon" />
<img src="path/to/fa-solid-fa-user.svg" alt="User icon" />

inline-svg パッケージを使用すると、SVG ファイルをインラインコードとしてインポートできます。以下の手順を実行します。

npm install inline-svg

import React from 'react';
import inlineSvg from 'inline-svg';

const App = () => {
  const homeIcon = inlineSvg('path/to/fa-solid-fa-home.svg');
  const envelopeIcon = inlineSvg('path/to/fa-solid-fa-envelope.svg');
  const userIcon = inlineSvg('path/to/fa-solid-fa-user.svg');

  return (
    <div>
      <h1>Font Awesome アイコン</h1>
      {homeIcon}
      {envelopeIcon}
      {userIcon}
    </div>
  );
};

export default App;

npm install react-svg

import React from 'react';
import { Svg } from 'react-svg';

const HomeIcon = () => <Svg src="path/to/fa-solid-fa-home.svg" />;
const EnvelopeIcon = () => <Svg src="path/to/fa-solid-fa-envelope.svg" />;
const UserIcon = () => <Svg src="path/to/fa-solid-fa-user.svg" />;

const App = () => {
  return (
    <div>
      <h1>Font Awesome アイコン</h1>
      <HomeIcon />
      <EnvelopeIcon />
      <UserIcon />
    </div>
  );
};

export default App;

Font Awesome Webpack Loader を使用する

Webpack を使用している場合は、Font Awesome Webpack Loader を使用して Font Awesome アイコンを簡単にインポートできます。

npm install font-awesome-webpack-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.eot(\?v=\d+.\d+.\d+)?|\.ttf(\?v=\d+.\d+.\d+)?|\.woff(\?v=\d+.\d+.\d+)?|\.svg(\?v=\d+.\d+.\d+)?$/,
        use: [
          {
            loader:

reactjs font-awesome