Laravel 6.x で Font Awesome を使用する 【npmでインストール】

#作業環境
Windows 10
Laravel : 6.18.35
Laravel/ui : 1.0
Laravel-mix : 5.0.1
Bootstrap : 4.0.0
MDBootstrap : 4.19.1
chart.js : 2.9.3
XAMPP
PHP : 7.4.3
Visual Studio Code
Font Awesome 5

#はじめに
この記事はプログラミングをはじめたばかりの素人が、できたことをメモするのに利用しています。
内容には誤りがあるかもしれません。

CDNの利用については沢山あったのですが、Laravel-mixを使う方法はあまりなかったので書いてみました。

#インストールするパッケージについて
Font Awesomeには大きく以下の2つのパッケージがある。

①@fortawesome/fontawesome-free
②@fontawesome-svg-core

####違いについて

	インストールの仕方	特徴
@fortawesome/fontawesome-free	全アイコンをインストール	すぐに使える
@fontawesome-svg-core	指定のアイコンのみインストール	APIで詳細に制御できる

#使用方法① @fortawesome/fontawesome-freeパッケージの利用
ターミナルを起動。

npm install @fortawesome/fontawesome-free --save

--saveはパッケージのインストール時、package.json の dependencies※ に追加してくれる機能。npm 5.0以降は不要。
※ dependenciesはアプリの実行時に必要なパッケージ。ローカルインストール。

resorces>js>ディレクトリに新しくfontawesome.jsファイルを作成し必要なデータをインポートする。

fontawesome.js

import "@fortawesome/fontawesome-free/js/fontawesome";
import "@fortawesome/fontawesome-free/js/brands";
import "@fortawesome/fontawesome-free/js/solid";
import "@fortawesome/fontawesome-free/js/regular";

####LightとDuotoneは、フリー版では選択できない。

次に、resources>jsのapp.jsに以下を追記。

app.js

require("./fontawesome");

ターミナルを再度起動し、以下のどちからを行う。

npm run dev または npm run watch-poll

以上でインストールは終了です。

#使用方法② @fontawesome-svg-coreパッケージの利用

ターミナルを起動。
以下を上から順に行う。
ただし、npm install @fortawesome/fontawesome-svg-core以外は必要なものだけインストールする。

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons --save-dev
npm install @fortawesome/free-regular-svg-icons --save-dev
npm install @fortawesome/free-brands-svg-icons --save-dev

--save-devはパッケージのインストール時、package.json の devDependencies※ に追加してくれる機能。
※ devDependenciesはアプリの開発時に必要なパッケージ。ローカルインストール。

resorces>js>ディレクトリに新しくfontawesome.jsファイルを作成し必要なデータをインポートする。
※この方法では{ }で指定したアイコンしか使えません。

fontawesome.js

import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { faFacebookF } from "@fortawesome/free-brands-svg-icons";
import { faInstagramSquare } from "@fortawesome/free-brands-svg-icons";
import { faEnvelope } from "@fortawesome/free-regular-svg-icons";

library.add(
  faFacebookF,
  faInstagramSquare,
  faEnvelope
  );

dom.watch();

####記述の内容

import { library, dom } from "@fortawesome/fontawesome-svg-core";

この記述で、fontawesome-svg-coreモジュールからlibraryとdomをインポートしてスコープに加えています。

import { faFacebookF } from "@fortawesome/free-brands-svg-icons";

この記述で、Bransモジュールの中からフェイスブックのブランドアイコンを指定して取得してます。

import { faFacebookF,faInstagramSquare } from "@fortawesome/free-brands-svg-icons"

同じモジュールから複数取得する場合は、上記のような記述もできます。

library.add(
  faFacebookF,
  faInstagramSquare,
  faEnvelope
  );

この記述で、libraryに利用するアイコンを登録。

dom.watch();

この記述で、domを監視し、iタグで指定したアイコンをsvgに置き換えます。

次に、resources>jsのapp.jsに以下を追記。

app.js

require("./fontawesome");

以上でインストールは終了です。

#インストール後の使用方法

HTMLやBladeテンプレート内で以下のように記述して使用。

<i class="fab fa-apple"></i>
<i class="fas fa-shopping-cart"></i>
<i class="far fa-heart"></i>

fab = Brands Style
fas = Solid Style
far = Regular Style を表します。

アイコンの種類や表記については、以下をご確認ください。
https://fontawesome.com/icons?d=gallery

#その他参考サイト