Laravelでfontawesomeを使えるようにしたい。
パッケージをインストール
$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons --dev
fontawesome-svg-core以外は必要なものだけで大丈夫。今回は以下の３つを追加しました。
- free-solid-svg-icons
- free-regular-svg-icons
- free-brands-svg-icons
読み込み用のファイル作成
fontawesome.jsを作成して読み込む形にします。
fontawesome.js
import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
library.add(
faPlusCircle
)
dom.watch()
必要な物をひとつひとつ追加。
fontawesome.js
import { fab } from '@fortawesome/free-brands-svg-icons'
library.add(fab)
ひとつずつ追加するのが面倒な場合は上のように全部追加しちゃえばいいかと。
コンパイル
$ yarn watch
コンパイルしたら、bladeに以下のように書けば表示されれます。
blade.php
<i class="fas fa-plus-circle"></i> 新規追加