Laravel6　Laravel Mixでfontawesome5(SVG)を使えるように

Laravelフレームワークで作っているアプリにSNSアイコンを追加したく、fontawesomeをLaravel Mixを使ってインストールすることにした。

やり方が分からないので、Googleで検索するも、
よく見かける↓ではnpmがエラーとなってインストールできない。

npmがエラーになるやつ

$ 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

出てきたエラーはこんな感じ

npm WARN deprecated @fortawesome/fontawesome@1.1.8: This package is deprecated. See https://git.io/fNCzJ for information about upgrading.
+ @fortawesome/fontawesome@1.1.8

エラーを翻訳してみたら（もちろんG翻訳）廃止されたパッケージだったらしい。なんじゃい。

エラーに記載のURLを見に行ってみると（See https://git.io/fNCzJ）npmのスコープも変わっているらしい。

ということで、正しくは下記。

エラーなし。正しいパッケージを指定しよう

執筆時点では下記のパッケージ指定でエラーは出ないが、月日とともにこれも古くなる可能性があるので、エラーが出たらエラーに記載されているURLにアクセスしてヒントを得よう！

$ 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

これでnpmでのインストールは完了。
fontawesome-svg-coreとその他は必要なものだけインストールしたら良い。

次は使えるようにする。

使えるようにする

fontawesomeはfontawesomeで管理できるように、resources/js/にfontawesome.jsを作る。
resources/配下にassetsを作っている場合はresources/assets/js/に。

resources/js/app.jsに書く形でもOK

1.fontawesome.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()

fontawesome-svg-coreモジュールからlibraryとdomをインポートしてスコープに加える。
ドキュメントの受け売りをしてみる。

参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import

import { faFacebookF } from '@fortawesome/free-brands-svg-icons'
//free-brands-svg-iconsモジュール（ブランドロゴ用のfontawesome）からfaFacebookFをインポート。
//全部を加えると無駄なので、必要なアイコンだけをインポートする。

import { faInstagramSquare } from '@fortawesome/free-brands-svg-icons'
//も同じ。こちらはインスタのアイコン。

//同じモジュールから取得する場合は
import { faFacebookF,faInstagramSquare } from '@fortawesome/free-brands-svg-icons'
//みたにカンマでつないだほうがすっきり。

import { faEnvelope } from '@fortawesome/free-regular-svg-icons'
//こちらはfree-regular-svg-iconsからメールのアイコン（Envelope）を。

//libraryに利用するアイコンを登録
library.add( 
		faFacebookF,
		faInstagramSquare,
		faEnvelope
		)

//「Kicks off the process of finding <i> tags and replacing with <svg>」
//css版のfontawsomeのようにiタグで指定したアイコンをapiがsvgに変換してくれる。
dom.watch()

https://fontawesome.com/how-to-use/javascript-api/methods/dom-watch

import { faCircle as fasFaCircle } from '@fortawesome/free-solid-svg-icons' // ES Module "as" syntax
import { faCircle as farFaCircle } from '@fortawesome/free-regular-svg-icons'

import { fab } from '@fortawesome/free-brands-svg-icons'
library.add(fab)

2.app.js

app.jsから作ったfontawesome.jsをインクルードする。

//app.js

require('./fontawesome');

ビルドする

ターミナルでnpm run devビルド

フロント開発中はnpm run watchでファイル更新のたびに自動的にビルドさせておくとラクダ。

bradeにiタグ書いてみる

<i class=”fab fa-facebook-f”></i>
<i class=”fab fa-instagram-square”></i>

これで勝手にSVGが表示される。便利ですね。