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>
