JavaScript学習法

Reactアプリケーションで最新のFontAwesomeを使いアイコンを表示させる方法

サムネイル画像

この記事では、Reactアプリケーションで、React専用の最新のFont Awesome(Ver5)ライブラリを使いアイコンを表示させる方法を解説します。

GitHub公式ドキュメントでは、「Font Awesome 5 React component using SVG with JS」と命名されていて、アイコンを従来の<i>タグではなく、Reactコンポーネントとして扱い、DOMにはAVGとしてレンダリングされます。

このReact専用のFont Awesomeを使う最大のメリットは、使用するアイコンのみをライブラリから読み込むので、最終的にバンドルされるJavaScriptファイルサイズが不必要に大きくならずにすみ、パフォーマンス低下を防ぐ点です。

イメージに反して導入方法はすごく簡単なので、まだ古いFont Awesome Ver4を使っているという方は、これから解説するやり方を参考に是非試してみてください。

なお、これ以降では、「Font Awesome 5 React component using SVG with JS」を「React-FontAwesome」と呼び説明を進めていきます。

 

事前準備

今回は、create-react-appを使い、React開発環境を整えます。

使うファイルは、まずはApp.jsのみ。

App.js内は、デフォルトの記述は不要なので削除し、以下のようにシンプルに。

App.js

import React from "react";

const App = () => {
  return (
    <div className="container">
      <h1>Parent :</h1>
    </div>
  );
};

export default App;

 

React-FontAwesomeをReactに導入する手順

React開発環境が準備できたら、次の3つのステップでアイコンを表示していきます。

  1. 各種ライブラリのインストール
  2. ライブラリから必要なアイコンなどを読み込む
  3. ReactコンポーネントとしてFont Awesomeアイコンを表示させる

 

1: 各種ライブラリのインストール

まず最初は、React-FontAwesomeを使うのに最低限必要となる以下3つのライブラリをインストールします。

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/free-solid-svg-icons

 

package.jsonのdependenciesで、以上3つが間違いなくインストールされたかを確認しておきましょう。

"dependencies": {
  // インストールした以下3つのパッケージが確実にインストールされたかを確認する
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",

    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.4.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },

 

 

2: インストールしたライブラリからモジュールを読み込む

次は、App.js内で、インストールしたライブラリから必要なモジュール(オブジェクト)を読み込みます。

一例としてコヒーカップのアイコンを表示させていきます。

まず、App.js に、次の3行を追記。

import { faCoffee } from "@fortawesome/free-solid-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";
library.add(faCoffee);

 

import { faCoffee } from "@fortawesome/free-solid-svg-icons";

1行目では、使いたいアイコン(ここではコーヒーカップ)を “@fortawesome/free-solid-svg-icons” から読み込んでいます。

 

今回のコーヒーカップアイコンは、「faCoffee」という形で呼び出しています。

faCoffeeのように、使いたいアイコンは、ある一定の命名ルールに従い読み込みます。

この命名規則に関しては、記事後半で解説します。

 

import { library } from "@fortawesome/fontawesome-svg-core";
library.add(faCoffee);

2、3行目では、

  1. “@fortawesome/fontawesome-svg-core” から libraryモジュールを読み込み、
  2. library.add(faCoffee) でという形で、使いたいアイコンをライブラリ登録します

このライブラリ登録により、親のAppコンポーネント以外、すなわち子コンポーネントでも簡単にアイコンを使い回せるようになります。(まずは親のAppコンポーネントのみで表示させていきます)

以上で、Reactアプリケーション内でReact-Font Awesomeを使う準備が整いまいした。

 

アイコンを表示させる

まずは、先ほどの3行に加えて、次の1行を追加。

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

 

記事の冒頭で、React-FontAwesomeは、<i>タグではなく、React コンポーネントとして、アイコンを表示すると説明したことを覚えているでしょうか。

ここでインポートした「FontAwesomeIcon」は、まさにアイコン用のコンポーネントです。

 

さて、ここまでで、App.jsにインポートしたモジュール類は以下のようになっているはずです。

// FontAwesomeIcon の呼び出しが一連のアイコンパッケージの中で一番上に来るようにする。
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { faCoffee } from "@fortawesome/free-solid-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";
library.add(faCoffee);

 

次はいよいよ、アイコンを表示させていきます。

以下のように、FontAwesomeコンポーネントをJSX内で読み込みます。

propsとして、表示させたいアイコン名を、icon=”~”の形で渡します。

<FontAwesomeIcon icon="coffee" />

 

icon= として文字列を渡すわけですが、表示させたいアイコンと対応する文字列は、以下の画像の通り、使いたいアイコンの詳細ページの左上のアイコンタイトルを渡します。

propsへの渡し方

 

App.jsは以下のようになり、コーヒーアイコンが表示されているはずです。

const App = () => {
  return (
    <div className="container">
      <h1>
        Parent :<FontAwesomeIcon icon="coffee" />
      </h1>
    </div>
  );
};

 

コーヒカップのアイコン

 

 

 

子コンポーネントでもアイコンを表示する

親のAppコンポーネントだけでなく、子コンポーネントでも、先ほどのコーヒーのアイコンを表示してみましょう。

childComponent.jsxを作成し、その中にChildComponentという名のコンポーネントを定義します。

注目すべき点は、再度コーヒアイコンをchildComponent.jsxで呼び込む必要はないということ。

親のAppコンポーネントで呼び込み、library.add()で一度登録してしまえば、わざわざ子コンポーネントが定義されたファイルで読み込まずとも、複数のコンポーネント間で使い回しができてしまうのです。

ただ、以下のFontAwesomeIconは必要なので、これは忘れずしっかりインポートしまましょう。

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

 

childComponent.jsxは次のようになり、無事コヒーアイコンが表示されるはずです。

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

const ChildComponent = () => {
  return (
    <div>
      Child :<FontAwesomeIcon icon="coffee" />
    </div>
  );
};

export default ChildComponent;

 

 

色んな種類のアイコンを使いたい場合

複数種類のアイコンを使いたい場合も、ここまでと手順は同じです。

つまり、親のAppコンポーネントで使いたいアイコンを呼び出して、library.add()で登録するだけ。

例えば、りんごバスも表示させたい場合。

App.js

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

// 1) 使いたいアイコンを呼び出す。左から、コーヒーカップ、りんご、バスとなっている。
import { faCoffee, faAppleAlt, faBus } from "@fortawesome/free-solid-svg-icons";

// 2) 呼び出したアイコンをlibrary.add()の引数に渡して、登録する。
import { library } from "@fortawesome/fontawesome-svg-core";
library.add(faCoffee, faAppleAlt, faBus);

 

親のAppコンポーネント、子のChildComponentは次のようになります。

App.js

import React from "react";
import ChildComponent from "./components/childComponent";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee, faAppleAlt, faBus } from "@fortawesome/free-solid-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";
library.add(faCoffee, faAppleAlt, faBus);

const App = () => {
  return (
    <div className="container">
      <h1>
        Parent : <FontAwesomeIcon icon="coffee" />
      </h1>
      <h2>
        Parent : <FontAwesomeIcon icon="apple-alt" />
      </h2>
      <h3>
        Parent : <FontAwesomeIcon icon="bus" />
      </h3>
      <ChildComponent />
    </div>
  );
};

export default App;

 

先ほどと同様に、アイコンは最初に親のAppコンポーネントで呼び込み登録しているので、子コンポーネントでは、FontAwesomeIconのみのインポートでOKです。

childComponent.jsx

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

const ChildComponent = () => {
  return (
    <React.Fragment>
      <div>
        Child : <FontAwesomeIcon icon="coffee" />
      </div>
      <div>
        Child : <FontAwesomeIcon icon="apple-alt" />
      </div>
      <div>
        Child : <FontAwesomeIcon icon="bus" />
      </div>
    </React.Fragment>
  );
};

export default ChildComponent;

 

複数のアイコンの表示

 

React-FontAwesomeで使える3種類のアイコンとそれらの使い方

ここからは、少し発展させて、3種類のアイコンの使い方を見ていきます。

Solid, Regular, Brandsの3種類のアイコン

React-FontAwesomeを無料で使う場合、次の3種類のタイプのアイコンを使えます。

接頭辞は、Regular と Brands のアイコンを使う時に必要です。

種類 接頭辞 特徴
Solid(ソリッド) fas 全体が色で塗り潰されている
Regular(レギュラー) far 外輪のみ色線、中は白色
Brands(ブランド) fab 企業や各種サービスのロゴ

 

Regular と Brand の使い方

ここまではSolidタイプだけを使っていたので、RegularとBrandsタイプの使い方を解説します。

ただ、大まかな流れはSolidタイプとほぼ同じ。

例として、Regularタイプはレモンアイコンを、BrandsアイコンはApplePayロゴアイコンを使います。

 

ライブラリのインストール

先ず初めは、 Regular と Brands、それぞれのライブラリをインストールします。

$ npm i --save @fortawesome/free-regular-svg-icons 
$ npm i --save @fortawesome/free-brands-svg-icons 

 

先ほど同じく、package.jsonで正しくインストールされたか確認。

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
     
   // 以下のように、Brnads と Regular の2つがインストールされていることを確認する
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-regular-svg-icons": "^5.13.0",

    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",

 

ライブラリから必要なモジュールの読み込み

インストールしたライブラリから必要なモジュールを読み込みます。

App.js

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faLemon } from "@fortawesome/free-solid-svg-icons";

// Regularタイプを使いたい場合は、Regularタイプを表す接頭辞:far のみをインポートする
import { far } from "@fortawesome/free-regular-svg-icons";

//Brandsタイプを使いたい場合は、Brandsの接頭辞fabと使いたいアイコンの2つをインポートする
import { fab, faApplePay } from "@fortawesome/free-brands-svg-icons";

//libaray.add()にインポートしたオブジェクト全てを渡す(登録する)
import { library } from "@fortawesome/fontawesome-svg-core";
library.add(far, fab, faLemon, faApplePay);

 

Regularタイプは、Regularタイプを表す接頭辞 far のみをインポートしている点に注目してください。

レモンアイコンは、SolidパッケージでfaLemonでインストールしてあるので、Regularから再度インポートする必要がないのです。

対して、サービスや企業ロゴのBrnadsタイプは、接頭辞 fabだけでなく、faApplePayというアイコンも同時にインポートしなければなりません。

 

モジュールを使いアイコンを表示

最後は、アイコンの読み込みです。

ここは、一番注意する必要があります。

Solidタイプは、以下のように、icon= に使いたいアイコンの文字列を渡すだけでOKでした。

<FontAwesomeIcon icon="coffee" />

 

しかし、RegularとBrandsタイプを使う場合は、icon= に使いたいアイコン名に加えて、

Regularならfar、Brandsならfabという接頭辞も一緒に配列として渡します。

さらに、この配列は、直接渡すのではなく、icon={}という形で中括弧の中に配列を渡します。

//Regularタイプ
<FontAwesomeIcon icon={["far", "lemon"]} />

//Brandsタイプ
<FontAwesomeIcon icon={["fab", "apple-pay"]} />

 

コード全体としては以下のようになります。

App.js

const App = () => {
  return (
    <div className="container">
      <h1>
        Parent (Solid): <FontAwesomeIcon icon="lemon" />
      </h1>
      <h2>
        {/* Regular, Brandsを使う時は、アイコンを表す文字列とともに、
       Regularならfar, Brandsならfabを配列として渡す。 */}
        Parent (Regular): <FontAwesomeIcon icon={["far", "lemon"]} />
      </h2>
      <h3>
        Parent (Brands): <FontAwesomeIcon icon={["fab", "apple-pay"]} />
      </h3>

      <ChildComponent />
    </div>
  );
};

 

子コンポーネントでもアイコンを使い回す

先ほど同様、library.add()で登録してあるので、子コンポーネントのChildCoponentで使いたい場合も、再度アイコンのインポートは不要です。

全体のコードは以下のようになります。

App.js

import React from "react";
import ChildComponent from "./components/childComponent";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faLemon } from "@fortawesome/free-solid-svg-icons";
import { far } from "@fortawesome/free-regular-svg-icons";
import { fab, faApplePay } from "@fortawesome/free-brands-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";
library.add(far, fab, faLemon, faApplePay);

const App = () => {
  return (
    <div className="container">
      <h1>
        Parent (Solid): <FontAwesomeIcon icon="lemon" />
      </h1>
      <h2>
        Parent (Regular): <FontAwesomeIcon icon={["far", "lemon"]} />
      </h2>
      <h3>
        Parent (Brands): <FontAwesomeIcon icon={["fab", "apple-pay"]} />
      </h3>

      <ChildComponent />
    </div>
  );
};

export default App;
childComponent.jsx

import React from "react";

//親のAppコンポーネントのlibrary.add()に登録してあるので、以下の最低限のインポートのみでアイコンを使いまわせる。
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const ChildComponent = () => {
  return (
    <React.Fragment>
      <div>
        Child (Regular): <FontAwesomeIcon icon={["far", "lemon"]} />
      </div>
      <div>
        Child (Brands): <FontAwesomeIcon icon={["fab", "apple-pay"]} />
      </div>
    </React.Fragment>
  );
};

export default ChildComponent;

 

RegularタイプBrandsタイプのアイコン

 

 

 

パッケージからインポートする際の命名ルール

ここでは、以下「faLemon」のように、パッケージから使いたい特定のアイコンをインポートするときの命名ルールを整理しておきます。

import { faLemon } from "@fortawesome/free-solid-svg-icons";

 

使えるアイコンのバラエティーが知りたいという人は、FontAwesome公式のアイコンギャラリーをから選びましょう。

このギャラリーから個別のアイコンページに飛び、そのページ左上のアイコンタイトルをこれから説明する命名規則に従いインポートすることになります。

命名規則は表にまとめると次の通り。

アイコン名 (読み込む際の)呼び名 使い方メモ
baby faBaby 接頭辞 fa を先頭につけ、続く文字を大文字にする
address-card faAddressCard ハイフンを取り除き、大文字にして繋ぐ

 

命名ルール①:先頭に「fa」という接頭辞をつける

まず第一に、solid, regular, brands問わず、

  1. アイコン名の直前に「fa」という接頭辞をつける
  2. 「fa」に続くアイコン名の最初の一文字目は大文字で始める

というルールになっています。

 

命名ルール②:ハイフン(-)は取り除く

次に、address-cardやbattery-fullのように、ハイフン(-)で繋がれている場合。

  1. ハイフンを取り除き、
  2. ハイフン直後の単語の先頭を大文字にして繋ぐ

 

使えるアイコンのバラエティーが知りたいという人は、FontAwesome公式のアイコンギャラリーを眺めて見るといいですよ。

 

まとめ

以上、Font AwesomeアイコンをReactコンポーネントとして使うための基本を解説してきました。

より高度な使い方などに関しては、以下のFont Awesome公式ドキュメントを参考にしてみてください。