Tutorial

ReactでFont Awesome 5を使用する方法

Published on January 6, 2021

Chris on Code

日本語

はじめに

Font Awesomeはウェブサイトでアイコンやソーシャルロゴを提供してくれるウェブサイトのツールキットです。Reactはユーザーインターフェースの作成に使用するJavaScriptコードライブラリです。Font Awesomeチームは統合促進のため、Reactコンポーネントを開発しましたが、Font Awesome 5とその構造について、基本を理解しておく必要があります。このチュートリアルでは、React Font Awesomeコンポーネントの使用方法を説明します。

アイコンが表示されたFont Awesomeウェブサイト

前提条件

このチュートリアルでコーディングは必要ありませんが、例をいくつか試すなら、次のものが必要です。

ローカルにインストールしたNode.js。Node.jsをインストールしてローカル開発環境を構築する方法を参照してください。
Reactアプリの開発。Reactプロジェクトをセットアップする方法を参照してください。

ステップ1 — Font Awesomeを使用する

Font AwesomeチームはFont Awesomeと併用できるように、Reactコンポーネントを開発しました。このライブラリについては、アイコン選択後、チュートリアルに従ってください。

この例では、homeアイコンを使用して、App.jsファイルですべてを行います。

src/App.js

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

アプリには今、小さな家のアイコンが表示されています。このコードではhomeアイコンしか選択されず、バンドルサイズにアイコン1つ分が加わっただけであると分かります。

homeアイコンが表示されたcode sandbox

これでFont Awesomeは、このコンポーネントが一旦マウントされれば、SVGバージョンに置き換わることを確認します。

ステップ2 — アイコンの選択

アイコンをインストールして使用する前に、Font Awesomeライブラリの構造を知っておくことが重要です。アイコンの数が多いため、複数のパッケージに分割することになりました。

どのアイコンを使うか選ぶ際、Font Awesomeアイコンページにアクセスして、選択肢を検討することをお勧めします。ページの左欄にさまざまなフィルタが表示されます。これらのフィルタは、アイコンのインポート元パッケージを示すので、大変重要です。

上記の例では、@fortawesome/free-solid-svg-iconsパッケージからhomeアイコンを取り出しました。

アイコンが属するパッケージを特定する

アイコンが属するパッケージは、左欄のフィルタを確認すればわかります。また、アイコンをクリックして、所属先パッケージを表示することもできます。

フォントの属するパッケージがわかったら、そのパッケージの3文字略語を覚えましょう。

ソリッドスタイル - fas
レギュラースタイル - far
ライトスタイル - fal
デュオトーンスタイル - fad

アイコンページから特定のタイプを検索できます。

左欄にパッケージ名が表示されたアイコンページ。

特定のパッケージのアイコンを使用する

Font Awesomeアイコンページを閲覧すると、大抵の場合、同じアイコンでも複数バージョンあるのが分かります。たとえば、boxing-gloveアイコンを見てみましょう。

3バージョンのboxing gloveアイコン

特定のアイコンを使用するには、<FontAwesomeIcon>を調整します。さまざまなパッケージに属する複数のタイプの同じアイコンを以下に示します。各アイコンにはそれぞれ、先ほど触れた3文字略語が含まれます。

**注:**次の例は、数セクション先でアイコンライブラリを作成するまでは機能しません。

ソリッドバージョンの一例：

<FontAwesomeIcon icon={['fas', 'code']} />

タイプを指定しなければ、これがソリッドバージョンのデフォルトになります。

<FontAwesomeIcon icon={faCode} />

falを使用するライト版です。

<FontAwesomeIcon icon={['fal', 'code']} />;

icon プロップを単純な文字列ではなく配列に変更ました。

Font Awesomeのインストール

1つのアイコンに複数のバージョン、複数のパッケージ、無料/有料パッケージがあるので、フルインストールすると1npmパッケージより大きくなります。パッケージを複数インストールしてから、必要なアイコンを選択するのがよいでしょう。

この記事では、すべてをインストールして、複数のパッケージをインストールする方法を説明します。

次のコマンドを実行してベースパッケージをインストールします。

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

次のコマンドを実行して、レギュラーアイコンをインストールします。

# regular icons
npm i -S @fortawesome/free-regular-svg-icons
npm i -S @fortawesome/pro-regular-svg-icons

これらのコマンドでソリッドアイコンをインストールします。

# solid icons
npm i -S @fortawesome/free-solid-svg-icons
npm i -S @fortawesome/pro-solid-svg-icons

このコマンドでライトアイコンをインストールします。

# light icons
npm i -S @fortawesome/pro-light-svg-icons

このコマンドでデュオトーンアイコンをインストールします。

# duotone icons
npm i -S @fortawesome/pro-duotone-svg-icons

最後に、このコマンドでブランドアイコンをインストールします。

# brand icons
npm i -S @fortawesome/free-brands-svg-icons

あるいは、一度にすべてをインストールしたければ、このコマンドで無料のアイコンセットをインストールできます。

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Font Awesomeのプロアカウントがあれば、次のコマンドですべてのアイコンをインストールできます。

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

パッケージはインストールしましたが、アプリケーションでの使用、アプリバンドルへの追加はこれからです。次のステップでその方法を見てみましょう。

ステップ4 — アイコンライブラリの作成

複数のファイルにアイコンをインポートするのは面倒な作業です。たとえば、Twitterのロゴを数カ所で使用するとしましょう。何度も記述したくありません。

すべてを一箇所にインポートするには、各アイコンをファイルごとにインポートするのではなく、Font Awesome libraryを作成します。

srcフォルダーにfontawesome.jsを作成し、それをindex.jsにインポートしましょう。そのアイコンを使用したいコンポーネントがアクセス可能な範囲で（つまり子コンポーネント）、このファイルをどこでも好きな場所に置いてください。index.jsやApp.jsでおこなってもうまくいきます。ただし、ファイルが巨大化するおそれがあるので、別ファイルに移動させた方がよいでしょう。

src/fontawesome.js

// import the library
import { library } from '@fortawesome/fontawesome-svg-core';

// import your icons
import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';

library.add(
  faMoneyBill,
  faCode,
  faHighlighter
  // more icons go here
);

独自のファイルで実施した場合、index.jsにインポートする必要があります。

src/index.js

import React from 'react';
import { render } from 'react-dom';

// import your fontawesome library
import './fontawesome';

render(<App />, document.getElementById('root'));

アイコンパッケージ全体のインポート

パッケージ全体をインポートするのはお勧めしません。アイコン一つ一つをアプリにインポートすると、バンドルサイズの巨大化を招くおそれがあるからです。パッケージ全体をインポートする必要があれば、もちろんそうすることもできます。

この例では、@fortaesome/free-brands-svg-iconにあるすべてのブランドアイコンをインポートするとしましょう。次のコマンドを入力してパッケージ全体をインポートします。

src/fontawesome.js

import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);

fabはブランドアイコン全体を表します。

アイコンの個別インポート

Font Awesomeアイコンは、バンドルサイズを極力軽くするために、ひとつずつ、必要なアイコンのみインポートすることをお勧めします。

次のように、さまざまなパッケージのアイコンで構成されるライブラリを作成できます。

src/fontawesome.js

import { library } from '@fortawesome/fontawesome-svg-core';

import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
import { faImages } from '@fortawesome/pro-solid-svg-icons';
import {
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
} from '@fortawesome/free-brands-svg-icons';

library.add(
  faUserGraduate,
  faImages,
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
);

複数のスタイルから同じアイコンをインポートする

fal、far、fasパッケージにある全タイプのboxing-gloveをインポートしたければ、別の名前を付けることで、すべてインポートして追加できます。

src/fontawesome.js

import { library } from '@fortawesome/fontawesome-svg-core';
import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
import {
  faBoxingGlove as faBoxingGloveRegular
} from '@fortawesome/pro-regular-svg-icons';
import {
  faBoxingGlove as faBoxingGloveSolid
} from '@fortawesome/pro-solid-svg-icons';

library.add(
    faBoxingGlove,
    faBoxingGloveRegular,
    faBoxingGloveSolid
);

これで、異なるプレフィックスを付けてこれらのアイコンを使用できます。

<FontAwesomeIcon icon={['fal', 'boxing-glove']} />
<FontAwesomeIcon icon={['far', 'boxing-glove']} />
<FontAwesomeIcon icon={['fas', 'boxing-glove']} />

ステップ5 — アイコンの使用

必要なものをインストールし、アイコンをFont Awesomeライブラリに追加したので、これらを使用してサイズを割り当てる準備が整いました。このチュートリアルでは、ライト（fal）パッケージを使用します。

1つ目の例では、通常のサイズを使用します。

<FontAwesomeIcon icon={['fal', 'code']} />

2つ目の例では、_サイズ名_を使用します。サイズ名には、小（sm）、中（md）、大（lg）、特大（xl）を略称で使用します。

<FontAwesomeIcon icon={['fal', 'code']} size="sm" />
<FontAwesomeIcon icon={['fal', 'code']} size="md" />
<FontAwesomeIcon icon={['fal', 'code']} size="lg" />
<FontAwesomeIcon icon={['fal', 'code']} size="xl" />

3つ目の例では、サイズ番号（最大6）を使用します。

<FontAwesomeIcon icon={['fal', 'code']} size="2x" />
<FontAwesomeIcon icon={['fal', 'code']} size="3x" />
<FontAwesomeIcon icon={['fal', 'code']} size="4x" />
<FontAwesomeIcon icon={['fal', 'code']} size="5x" />
<FontAwesomeIcon icon={['fal', 'code']} size="6x" />

サイズ番号を使用する際、小数点を使用して完璧なサイズを得ることもできます。

<FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />

Font AwesomeはCSSの文字色を利用して、使用するSVGをスタイリングします。このアイコンを置く場所に <p>タグを配置すると、その段落の色がアイコンの色になります。

<FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />

Font Awesomeにあるpower transforms機能を使用すると、さまざまな変形をつなぎ合わせられます。

<FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />

Font Awesomeサイトにある変形なら何でも使用できます。これを使用すると、アイコンを上下左右に動かしたり、文字の横でもボタンの内部でも最適な位置に配置できます。

アイコンの幅を固定する

一箇所で複数のアイコンを、同じ幅で揃えて使用するには、Font AwesomeのfixedWidth のプロップが使用できます。。たとえば、ナビゲーションドロップダウン用に幅を固定させる必要があるとしましょう。

ドロップダウンメニューとハイライトされた「Courses」が表示されたスコッチウェブサイト

<FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />

アイコンを回転させる

フォームが処理中の際、フォームボタンに回転機能を実装すると便利です。ロード中を効果的に示す回転アイコンを使用できます。

<FontAwesomeIcon icon={['fal', 'spinner']} spin />

spin プロップは何にでも使用できます。

<FontAwesomeIcon icon={['fal', 'code']} spin />

拡張機能：アイコンをマスクする

Font Awesomeでは2つのアイコンを組み合わせてマスキング効果を施せます。1つ目の通常アイコンを定義し、次にmaskプロップを使用して2つ目のアイコンを定義して上部に配置します。1つ目のアイコンが、マスキングアイコンの下で抑制されます。

この例では、マスキングを使用してタグフィルターを作成しました。

Font Awesomeのタグフィルター

<FontAwesomeIcon
  icon={['fab', 'javascript']}
  mask={['fas', 'circle']}
  transform="grow-7 left-1.5 up-2.2"
  fixedWidth
/>

複数のtransform プロップをどのようにつなげ、下部のアイコンを移動させてマスキングアイコンに合わせているかに注目してください。

Font Awesomeで背景ロゴまで色付け、変更しています。

再びタグフィルター、今度は青色の背景で

ステップ6 — Reactの外で`react-fontscape`とアイコンを使用する

サイト全体が単ページのアプリケーション（SPA）ではなく、従来型のサイトが設けられ、Reactがトップに追加されているとします。Font Awesomeは、メインのSVG/JSライブラリとreact-fontawesomeライブラリのインポートを避け、Reactライブラリを使用してReactコンポーネントの外部のアイコンを監視する方法を編み出しました。

<i class="fas fa-stroopwafel"></i>がある場合、次のようにそれらのアイコンを監視・更新するよう、Font Awesomeに指示します。

import { dom } from '@fortawesome/fontawesome-svg-core'

dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver

MutationObserverは、DOMの変更の常時監視を実現するWebテクノロジーです。この技術については、Reactフォント Awesomeドキュメントを参照してください。