Rails 7 + ImportmapでFont Awesomeを実装する

FontAwesome

アイコンを使うのにFontAwesomeというライブラリーはすごくいいだけど、インストールするには公式サイトにこれしか書いてなかったからインストールに詰まりました。

# npm
npm install --save @fortawesome/fontawesome-free

# yarn
yarn add @fortawesome/fontawesome-free

これだけだとアイコンは表示されないし、フレームワークごとのインストール方法は書いてなかったからちょっと調べてみたら、YouTubeのこの動画を見つけてFontAwesomeをけっこう簡単に実装できたのでやり方をこちらにも書いときます。

そもそもImportmapの使い方は知らなかったのが詰まる原因だったと思うんで反省していますが、とにかく実装できたのですっきりしました。

パッケージマネジャーでインストールした後に...

上記のnpmかyarn コマンドでパッケージをインストールしたら、ターミナルで次のコマンドを打ちます

./bin/importmap pin @fortawesome/fontawesome-free

筆者の場合は多少時間かかったけど、次のメッセージが出力されました。

Pinning "@fortawesome/fontawesome-free" to https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.2.0/js/fontawesome.js

importmap.rbを編集する

importmap.rbに次の行ができるはずです。バージョンは違うものになるかもしれないので注意してください。

importmap.rb

pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.2.0/js/fontawesome.js"

最後のfontawesome.jsをall.jsに変えます。

importmap.rb

pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.2.0/js/all.js"

JavaScript

最後はapp/javascript/application.jsにfontawesomeをimportします

app/javascript/application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "@fortawesome/fontawesome-free" // これです

以上！

好きなアイコンを選んで画面に表示しましょう

<i class="fa-brands fa-github"></i>