Rails 5.2 + Webpack で Fontawesome Pro 5 をNPMライブラリから使用する

概要

Rails 5.2にて、Fontawesome Proを導入する際、
公式ドキュメントの内容だけでは不足で、若干苦戦しましたので解説いたします。

macOS 10.13.5
Rails 5.2
FontawesomePro 5.1.0
YARN 1.7.0
Webpack 3.12.0
Webpacker 3.5.5

なお、Webpackを使用したフロントエンド周りの構築は、
以下の記事を参考にして構築したものです。
新しいRailsフロントエンド開発（1）Asset PipelineからWebpackへ（翻訳）

Rails 5.2のWebpackを使用するプロジェクトの基礎が既にできており、
Yarnも使用できる状態であることを前提に解説いたします。

またFontawesomeProの利用は有料です。
専用のトークンが必要です。

手順

1. .npmrcの作成
2. ライブラリのインストール
3. importの記述
4. アイコンを使おう!

1. .npmrcの作成

FontawesomeProの利用には、各ユーザー専用のトークンが必要になりますが、
.npmrcファイルに設定を記述し、コミットしておくと他の環境でもパッケージのインストールが可能です。

まず、プロジェクトのルートディレクトリ(もしくはpackage.jsonと同じディレクトリ)に作成します。

touch .npmrc

作成した.npmrcをエディタなどで開き、以下の内容を記述します。

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken={TOKEN}

{TOKEN}の部分は、ご自身のトークンを記述してください。
Fontawsomeの有料ライセンスを契約していれば以下のページで確認できます。
https://fontawesome.com/account/licenses

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

以下のコマンドをプロジェクトのルートディレクトリで実行して、
fontawesomeの公式ライブラリをインストールします。

ここで公式のドキュメントには、
fontawesomeのコアファイルのライブラリをインストールする部分しか解説されておらず、
そのせいで時間を取られました。

yarn add @fortawesome/fontawesome-pro

2018.07.28 追記
なぜか基本的なアイコンしか使用できないことに気づき、再度調査をしたところ、
必要なパッケージは @fortawesome/fontawesome-pro のみでした。
これで全てのスタイルと全てのアイコンが使用できます。
importの方法についても追記修正しております。

上記コマンドの1行目は必須です。
2から4行目は必要なスタイルのライブラリとなりますが、
最低でもどれか一つはインストールしていないと使用できません。

- fontawesome-pro-light: 細いラインのアイコン
- fontawesome-pro-solid: 太いラインのアイコン
- fontawesome-pro-regular: 標準のラインのアイコン

上記のアイコンスタイルのライブラリは、
フリー版で提供されているアイコンも含まれていますが、
各企業のロゴなどのアイコンも使用する場合は、別途以下のコマンドで、
ブランドアイコンのライブラリのインストールが必要です。

3. importの記述

2018.07.28 追記
スタイルごとのパッケージのインストールもインポートも必要なく、
上記の1行だけのインポートで完了します。
多大なる間違いを訂正し、お詫び申し上げます。

インストールしたライブラリを使用するためロードさせる記述を解説いたします。
以下のコードは全てのスタイルを読み込ませているパターンです。

import '@fortawesome/fontawesome-pro/js/all'

全てが必要なく、特定のライブラリだけ読み込ませたい場合は、
指定してロードさせることができます。

以下は全て記述していますが、必要なスタイルのもののみ選択してください。

import '@fortawesome/fontawesome-pro/js/light'
import '@fortawesome/fontawesome-pro/js/regular'
import '@fortawesome/fontawesome-pro/js/solid'
import '@fortawesome/fontawesome-pro/js/brands'

4.アイコンを使う

あとはおなじみの<i>タグを、アイコン指定のクラスをつけて、
必要なところに配置していくだけですが、
light solid regularによってタグが少し異なります。

通常<i>タグのクラス名にfa fa-{アイコン名}というクラスが付きますが、
はじめのfaの部分の違いによって、アイコンのスタイルが変わります。

fa もしくは far だと通常の太さのアイコン(regular)
fas だと太いアイコン(solid)
fal だと細いアイコン(light)

またブランドロゴのiconはfabとつける必要があるみたいです。
ブランドアイコンの一覧はこちら

となりますので、必要におおじて使い分けてください。
※importの部分で、スタイルごとにパッケージを読み込んでいる場合は、
該当するスタイルのライブラリをロードしていないと使えません。

<i class="fa fa-stroopwafel"></i> <!-- レギュラー -->
<i class="fas fa-stroopwafel"></i> <!-- ソリッド -->
<i class="fal fa-stroopwafel"></i> <!-- ライト -->
<i class="fab fa-500px"></i> <!-- ブランドアイコン -->

まとめ

あまり時間をかけたくないところで時間がかかってしまい、
困りましたがなんとか解決できてよかったです。
公式ドキュメントもう少し親切に書いておいてほしい・・・

わかりにくいところや、間違っているところがございましたら、
ぜひともコメント頂けますと幸いです。

参考

webpack - Font Awesome 5 Bundle via NPM - Stack Overflow
Using a Package Manager | Font Awesome