FontAwesome6(Pro)をimportmapなRails7に組み込む

FontAwesome6がリリースされました。これをRails7 with importmap に組み込もうとしたところ、いくつかの知識が必要だったので共有します。それぞれを知っていれば特に難しい話ではないのですが、どなたかの役に立てばと思います。

Rails7ではwebpackerがなくなり、importmapで管理する必要があります。

webpackerにFontawesome Proを組み込むには、.npmrcに認証情報を書くなどして対応をする必要がありましたが、importmapではこのやり方が使えません。

ちょっとググっても方法が見つからなかったのですが、下記のようにすれば使えました。

FontAwesome Pro Kit URLの取得

FontAwesomeのサイトに行き、Kitと呼ばれるツールを使い、FontAwesomeをサーブするURLを作る。
https://fontawesome.com/docs/web/setup/use-kit
FontAwesome 5以降はCDNではなく、このKitを使ってサーブするのを推奨しているようです。

config/importmap.rb に設定を追加

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
# この1行を足す。
pin "fontawesome", to: "https://kit.fontawesome.com/YOUR-KIT-PATH.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

https://kit.fontawesome.com/YOUR-KIT-PATH.js のところは実際のKit URLで置き換えてください。
何となく pin_all_from の前に書いた方がいいのかなと思ってそうしています。

app/javascript/application.js に設定を追加

import "@hotwired/turbo-rails"
import "controllers"
import "fontawesome" // この1行を追加

importで使う名前は、config/importmap.rb の pin に書いた名前と同じであれば、 fontawesome でなくても問題ありません。

使ってみる。

<p>
  Hello, FontAwesome 6! <i class="fas fa-thumbs-up"></i>
</p>