Rails 5.2 + webpacker で FontAwesome 5 を利用する

簿記録として残しておきます。

環境

$ rails -v
Rails 5.2.3
$ ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin18]
$ node -v
v11.11.0
$ yarn -v
1.15.2

macOS Mojave

webfontを利用する

CSS/Sass/Lessでwebfontsを利用する。

スタイルシートにwebfontsをインポートします。

$ yarn add @fortawesome/fontawesome-free-webfonts

application.scss

$fa-font-path: '~@fortawesome/fontawesome-free-webfonts/webfonts'; 
@import '~@fortawesome/fontawesome-free-webfonts/scss/fontawesome';
@import '~@fortawesome/fontawesome-free-webfonts/scss/fa-solid';

FontAwesome 5 を利用する

Javascriptで、SVGを利用する

$ yarn add @fortawesome/fontawesome
$ yarn add @fortawesome/fontawesome-free-solid

JSファイルへ以下を追加

app/javascript/pack/[your_entry_point_file.js]

import '@fortawesome/fontawesome'
import '@fortawesome/fontawesome-free-solid'

必要なアイコンだけをロードすることで、サイズを縮小しパフォーマンスを向上することができます。

import fontawesome from '@fortawesome/fontawesome'
import { faCoffee, faCameraRetro } from '@fortawesome/fontawesome-free-solid'
fontawesome.library.add(faCoffee, faCameraRetro)