FontawesomeのRails6への導入

はじめに

この記事ではyarnへのインストールをする方法で話を進めていきます。

導入環境

Mac Catalina ver10.15.7
Ruby 2.6.5
Rails 6.0.3.5

導入方法

まずは導入したいアプリのディレクトリでyarnにfontawesomeを取り込むコマンドを打ち込みます。

%yarn add @fortawesome/fontawesome-free

そうすると処理の後、Done!と出るのでyarn.lockとpakage.jsonファイルを確認してみましょう

yarn.lock

"@fortawesome/fontawesome-free@^5.15.3":
  version "5.15.3"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz#c36ffa64a2a239bf948541a97b6ae8d729e09a9a"
  integrity sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==

pakage.json

"@fortawesome/fontawesome-free": "^5.15.3"

各ファイルに上記の記述があればひとまずOKです。
そして今度はjavascriptとstylesheetsへの導入を行います。

javascript/packs/application.js

import '@fortawesome/fontawesome-free/js/all';

javascriptファイルへはそのまま上記の記述をするだけで良いですが
stylesheetsへの導入の際、元々あるapplication.cssをapplication.scssに変更する必要があるので注意してください。

application.scss

$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
 @import '@fortawesome/fontawesome-free/scss/fontawesome';
 @import '@fortawesome/fontawesome-free/scss/solid';
 @import '@fortawesome/fontawesome-free/scss/regular';
 @import '@fortawesome/fontawesome-free/scss/brands';
 @import '@fortawesome/fontawesome-free/scss/v4-shims';

これらの記述が完了したら実際にviewにfontawesomeで提供されているタグをコピペしたり、
記述する事で見た目に反映されます。
余談ではありますが上記の記述の内regular以下はfontawesomeにPro登録をする事で使用可能になるもののため記述の必要は無さそうではあります。

##最後に
これで様々なアイコンが使用可能になるため、ユーザーへのUIデザインの配慮がしやすくなります。
今回はあくまでHowの部分なため各ファイルの相互関係による動作の部分であるWhyも今後学習を進めていきたいです。