webpackerでfont-awesome5を使ってみた。

Rails5.1.5で趣味アプリを作っていってるんですが、css frameworkはbootstrap4を使っているのですが、bootstrap4からはどうもアイコンフォントは別で準備されることになったっぽいので、安定のfont-awesome5を使うかーと思ったので入れてみました。

それにしても未だにNode.jsをちゃんと勉強したことがないのでrequireとimportとかがごっちゃになって参ります。まぁ自分のせいなんですが。

font-awesomeは5でどうなったのか？

Get Started | Font Awesome

Get startのページを確認したところ、JS版とCSS版とAdvanced Optionsと色々あります。本家のオススメはJS版のようです。Advanced Optionsは、npmでのインストールするパターンとか、ReactやVueで使うパターンのやつみたいです。

CSS版は、古いブラウザに対応するときはこちら、みたいにやや煽った表現になってますね…。

なんでJS版のほうがいいかは、CSSだと環境によってはフォントの読み込みのパスで悩むことが多かったと思うのですが、JS版だとsvgに変換して出力するので、そういう悩みから解放されるのとファイルサイズが小さくなるとか（ちゃんと調べてないけど）。あと、自分はやったことないのですが、Node.jsを使ったサーバサイドレンダリングが可能になるからとか。

今回はyarnでインストールして使ってみたかったので、そうしました。

font-awesomeをインストール

今回は無料版のみをインストールしました。 yarnでfont-awesome系を色々入れていきます。

yarn add @fortawesome/fontawesome @fortawesome/fontawesome-free-solid @fortawesome/fontawesome-free-regular @fortawesome/fontawesome-free-brands

webpackerで使う

webpacker経由で使うには、app/javascript/packs/application.jsにて読み込むようにします。

import fontawesome from '@fortawesome/fontawesome'
import faSolid from '@fortawesome/fontawesome-free-solid'
import faRegular from '@fortawesome/fontawesome-free-regular'
import faBrands from '@fortawesome/fontawesome-free-brands'

fontawesome.library.add(faSolid, faRegular, faBrands)

fontawesome.dom.i2svg()

yarnでインストールするときには、ググったやつをコピペして入れたので全然気づかなかったのですが、jsファイルにimportを書くときに、@fontawesome/fontawesomeと書いていたのですが、railsを起動してアクセスしてみたら読み込めないって怒られてしまって結構悩んでいたのですが、@fortawesome/fontawesomeなんですね。え、nじゃなくてr！？まじで？？？と思って本家のサイトを参照しにいったのですが、たしかに@fortawesome/fontawesomeと書いてありました。

fontawesome.dom.i2svg()メソッドで、iタグにつけたクラス名からsvgに変換してアイコンを表示してくれますので、我々はいつも通り<i class="fa fa-user"></i>みたいに使っていればいいようです。

一応、サンプルのhtml(erb)。

<h1><i class="fa fa-user"></i><%= user.name %></h1>

結果はこちら。

出ました！

turbolinksも併せて使う

turbolinksで使う場合は、turbolinks:loadイベントで呼び出せばいいかと思います。

import fontawesome from '@fortawesome/fontawesome'
import faSolid from '@fortawesome/fontawesome-free-solid'
import faRegular from '@fortawesome/fontawesome-free-regular'
import faBrands from '@fortawesome/fontawesome-free-brands'

fontawesome.library.add(faSolid, faRegular, faBrands)

document.addEventListener('turbolinks:load', () => {
  fontawesome.dom.i2svg()
})