【Laravel + Vue.js】で fontawesome を使う!

Laravel
この記事は約5分で読めます。

はじめに

Laravel + Vue.js で fontawesome のインストールして使う手順を解説します！

ものすごく簡単ですので備忘録の意味も込めて記事を書いていきます！

クロたん
クロたん

fontawesome でアイコンが使えるようになると、UI 面で非常に重宝するにゃ～！

わい
わい

その通り！「削除」という文字列より、ゴミ箱アイコンの方がユーザーに伝わる意味が同じでも、余計なスペースを使わないし、表記ゆれとかも防げるね！

環境

  • Laravel version
php artisan -V
Laravel Framework 8.83.27

手順

  • プロジェクトパスへ
cd /path/to/project

※ /path/to/project には、artisanファイル が格納されているディレクトリパスを指定する。

  • インストール
npm install @fortawesome/fontawesome-svg-core
わい
わい

以下3つはすべて install してもいいですし、どれか1つだけでも構いません。自分が使うアイコンが含まれているもの pick up してインストールしてください！
しかし、自分の経験上、 icon が表示されないなんてことは多々あるので無難に全部インストールしてます。。。

npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-brands-svg-icons
npm install @fortawesome/free-regular-svg-icons
npm install @fortawesome/vue-fontawesome

最後の @fortawesome/vue-fontawesome に関しては、vue の version によってエラーが出る可能性があります。そういった方は @latest をつけてインストールしてください！

npm install @fortawesome/vue-fontawesome@latest

それでもエラーが出るという方はを
@fortawesome/vue-fontawesome がどうしてもインストールできない方へ！
を参照してください！

ファイルへ記述

  • 以下すべてを /resources/js/app.js に追記する。
// アイコンlibrary
import { library } from '@fortawesome/fontawesome-svg-core'
// それぞれのアイコンデータを import して library に add する
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
library.add(fas, far, fab)

// vue の view で font-awesome-iconタグ を使えるように import
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
Vue.component('font-awesome-icon', FontAwesomeIcon)
  • view に font-awesome-iconタグ を使ってアイコンを表示
    例）ゴミ箱アイコン
<font-awesome-icon :icon="['fas', 'trash-can']" />
クロ
クロ

ゴミ箱アイコンが表示されたにゃ～！！！

@fortawesome/vue-fontawesome がどうしてもインストールできない方へ！

  • vue の version 確認 (install がうまくできない方向け)
npm list vue
わい
わい

自分の場合は、vue@2.7.14！

  • @fortawesome/vue-fontawesome で使える version を検索
npm info @fortawesome/vue-fontawesome versions
  • 以下の数字群が表示されると思います。
[
'0.0.1', '0.0.2', '0.0.3', '0.0.4',
'0.0.5', '0.0.6', '0.0.7', '0.0.8',
'0.0.9', '0.0.10', '0.0.11', '0.0.12',
'0.0.13', '0.0.14', '0.0.15', '0.0.16',
'0.0.17', '0.0.18', '0.0.19', '0.0.20',
'0.0.21', '0.0.22', '0.0.23-1', '0.0.23',
'0.1.0-1', '0.1.0-2', '0.1.0-3', '0.1.0-4',
'0.1.0-5', '0.1.0', '0.1.1', '0.1.2',
'0.1.3', '0.1.4', '0.1.5', '0.1.6',
'0.1.7', '0.1.8', '0.1.9', '0.1.10',
'2.0.0', '2.0.1', '2.0.2', '2.0.3',
'2.0.4', '2.0.5', '2.0.6', '2.0.7',
'2.0.8', '2.0.9', '2.0.10', '3.0.0-1',
'3.0.0-2', '3.0.0-3', '3.0.0-4', '3.0.0-5',
'3.0.0', '3.0.1', '3.0.2', '3.0.3'
]
ケン
ケン

自分の場合は、vue2系でしたので、以下を実行すると install ができました。

npm install @fortawesome/vue-fontawesome@2.0.10

さいごに

fontawesome とかのインストールって、あまり触る機会も深く理解する機会もないので備忘録の意味を込めて記事にしました！

fontawesome がアプリケーション上で使えるようになると、直観的に ボタンやアクションが起こるものとして、ユーザーへの理解を促すことができます！

ケン
ケン

自分はいままでfontawesome 絡みでエラーが起きると、ついつい svg や 文字列 に逃げてしまっていました。。。

今回を機に積極的に多用していきたいと思います！

クロたん
クロたん

またにゃ～～～。

コメント