Laravel＋vue.jsでFontAwesomeを使うメモ

はじめに

Laravel8＋Vue3でFont Awesomeを使用する際に
少し苦戦してしまったので
忘れないようにメモしておきます

開発環境は
DockerでLaravel vue.jsの環境を構築してます

FontAwesomeをインストールする

プロジェクトに移動して
FontAwesomeをインストールします

$ npm install --save @fortawesome/fontawesome-svg-core
$ npm install --save @fortawesome/free-solid-svg-icons
# Using Vue 3.x
$ npm install --save @fortawesome/vue-fontawesome@prerelease

上記にもあるのですが
vue 3.x ~はvue-fontawesomeの後ろに@prerelease(事前公開)が付くみたいです
vue 2.x ~は@latest (最新)をつけるみたいです

インストールし終わったら

package.jsonを見に行って
インストールしたものがあるかチェックしておきましょう

  "@fortawesome/fontawesome-svg-core": "^1.2.36"
  "@fortawesome/free-brands-svg-icons": "^5.15.4"
  "@fortawesome/vue-fontawesome": "^3.0.0-4"

実際に使用する

インストールが終わったのであとは使用するだけです！

今回はこいつを使いましょう
https://fontawesome.com/v5.15/icons/angle-right?style=solid

よく見るやつです

まず、表示したいvueファイルのscript内で

<script>
import { library } from "@fortawesome/fontawesome-svg-core";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(faAngleRight);

export default {
  components: {
    FontAwesomeIcon,
  },
</script>

上記のようにimportとexport をしてあげます

library.addでは使いたいアイコンを追加する。（使用する宣言をしてあげます）

今回の場合はfaAngleRightを使用すると宣言します。

---

また、アイコンを追加する際は

fa-angle-righ　のように　ハイフンで繋げてあるケバブケースから
faAngleRight　のように　キャメルケースにして使用してください！

script 内の記述が終わったので
次はtemplateです

<template>
<FontAwesomeIcon icon="angle-right" />
</template>

上記のように使いたい箇所に記載すれば　アイコンが使用できます！

またしてもここで注意が必要なのですが

icon="" の中身は　angle-rightのように　
ケバブケースにしてあげないと動きません！

少し面倒ですがお忘れなく！！

---

以上　自分のメモ用に記載しました。
間違い等ありましたら　優しくご指摘くださいませ。