概要

FontAwesome5 を Rails6 + Webpacker で使う場合のセットアップ方法について紹介します。

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

FontAwesome のパッケージをインストールします。

yarn add @fortawesome/fontawesome-free

Webpacker での読み込み

app/javascript/packs/application.js を開いてインストールしたパッケージをインポートします。

ここでは Solid、Regular、Brands のすべてのタイプをインポートしています。
Solid もしくは Regular しか使わないのであれば使わないタイプは削除しても構いません。

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

// ここから追記
import '@fortawesome/fontawesome-free/js/fontawesome';
import '@fortawesome/fontawesome-free/js/solid';
import '@fortawesome/fontawesome-free/js/regular';
import '@fortawesome/fontawesome-free/js/brands';

以上でセットアップは完了です。
html.erb ファイル内で <i class="fas fa-user"></i> と書けばアイコンが表示されているはずです。

特定のアイコンのみを読み込む

場合によってはアプリケーションで使用するアイコンのみを読み込みたい時があります。
この場合は @fortawesome/fontawesome-free ではない別のパッケージをインストールします。

ここでは fa-user アイコンを読みこむ例を紹介します。

まずは必要なパッケージのインストールから。
FontAwesome のコアライブラリと fa-user アイコンが入っている Solidタイプのパッケージが必要になります。

yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

先ほどと同じように app/javascript/packs/application.js に追記します。

//...略
import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { faUser } from '@fortawesome/free-solid-svg-icons'

library.add(faUser)

dom.watch()

使用したいアイコンをキャメルケースで読み込み、library.add(faUser) で追加しています。
dom.watch() は FontAwesome の仕組み上、必要になる記述です。

以上でセットアップは完了です。
今回もアイコンが表示されるようになっているはずです。