Laravel MixでFontAwesome5を組み込む

Laravel Mixを使って、FontAwesome5をアプリケーションに組み込みます。

必要なファイルをインストールします。

$ npm install @fortawesome/fontawesome --save-dev
$ npm install @fortawesome/fontawesome-free-regular --save-dev
$ npm install @fortawesome/fontawesome-free-solid --save-dev
$ npm install @fortawesome/fontawesome-free-brands --save-dev

次に、 resources/assets/js/app.js 内に下記を追加します。

import fontawesome from '@fortawesome/fontawesome';
import regular from '@fortawesome/fontawesome-free-solid';
import solid from '@fortawesome/fontawesome-free-regular';
import brands from '@fortawesome/fontawesome-free-brands';

fontawesome.library.add(regular);
fontawesome.library.add(solid);
fontawesome.library.add(brands);

コンパイルを実行

$ npm run dev

作成された public/js/app.js をviewファイル内で読み込ませて、

<script src="/js/app.js"></script>

あとは、表示させたいところにFontAwesomeのタグを貼り付ければ表示されます。

<i class="fas fa-camera-retro"></i>

参考にしたところ

https://fontawesome.com/how-to-use/use-with-node-js
https://stackoverflow.com/questions/49304017/install-font-awesome-5-with-npm-for-scss-usage