nuxt.jsでfontawsome5アイコンを使用するには
nuxt.js＋bulmaでアプリケーション開発しようとしたが、よくbulmaとセットになってるfontawsomeが公式インストーラーでは入らない、使い方がよくわからないのでまとめてみました。
abstract
設定ファイル(nuxt.config.js)に数行書き込めば簡単に使うことができる。
方法としてはいくつかあるようです。
今回の方針
- 特殊タグを使用する方式
- 無料版の範囲のみ
- 使えるアイコンは全て使えるようにする
手順
まずは使用するライブラリをインストール
$ npm install @fortawesome/fontawesome-svg-core
$ npm install @fortawesome/vue-fontawesome
$ npm install @fortawesome/free-solid-svg-icons
使用するライブラリとしてnuxt.jsに登録する
.vueファイルでアイコンを使う部分に下記のようにタグを置いてあげることでアイコンができる
↓結果のアイコンになります
細かいアイコンの種類、使い方は後ほどまとめようと思います。
まとめ
うまく使用できるようになったでしょうか？
nuxt.jsは色々使用できて便利かもしれませんが細かい部分でわからないところがあるかと思います。
この記事が参考になれば幸いです。
