はじめに
Font Awesomeはウェブサイトでアイコンやソーシャルロゴを提供してくれるウェブサイトのツールキットです。Reactはユーザーインターフェースの作成に使用するJavaScriptコードライブラリです。Font Awesomeチームは統合促進のため、Reactコンポーネントを開発しましたが、Font Awesome 5とその構造について、基本を理解しておく必要があります。このチュートリアルでは、React Font Awesomeコンポーネントの使用方法を説明します。
前提条件
このチュートリアルでコーディングは必要ありませんが、例をいくつか試すなら、次のものが必要です。
ステップ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つ分が加わっただけであると分かります。
これでFont Awesomeは、このコンポーネントが一旦マウントされれば、SVGバージョンに置き換わることを確認します。
ステップ2 — アイコンの選択
アイコンをインストールして使用する前に、Font Awesomeライブラリの構造を知っておくことが重要です。アイコンの数が多いため、複数のパッケージに分割することになりました。
どのアイコンを使うか選ぶ際、Font Awesomeアイコンページにアクセスして、選択肢を検討することをお勧めします。ページの左欄にさまざまなフィルタが表示されます。これらのフィルタは、アイコンのインポート元パッケージを示すので、大変重要です。
上記の例では、@fortawesome/free-solid-svg-icons
パッケージからhome
アイコンを取り出しました。
アイコンが属するパッケージを特定する
アイコンが属するパッケージは、左欄のフィルタを確認すればわかります。また、アイコンをクリックして、所属先パッケージを表示することもできます。
フォントの属するパッケージがわかったら、そのパッケージの3文字略語を覚えましょう。
- ソリッドスタイル –
fas
- レギュラースタイル –
far
- ライトスタイル –
fal
- デュオトーンスタイル –
fad
アイコンページから特定のタイプを検索できます。
特定のパッケージのアイコンを使用する
Font Awesomeアイコンページを閲覧すると、大抵の場合、同じアイコンでも複数バージョンあるのが分かります。たとえば、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
のプロップが使用できます。。たとえば、ナビゲーションドロップダウン用に幅を固定させる必要があるとしましょう。
<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つ目のアイコンが、マスキングアイコンの下で抑制されます。
この例では、マスキングを使用してタグフィルターを作成しました。
<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ドキュメントを参照してください。
まとめ
Font AwesomeとReactの併用は素晴らしい組み合わせですが、複数のパッケージを使用し、異なる組み合わせを検討する必要が生じます。このチュートリアルでは、Font AwesomeとReactを併用する方法をいくつか説明しました。