1. OvThAlmin

    Posted

    OvThAlmin
Changes in title
+nuxt-fontawesomeを使って Nuxt.jsへFont Awesome 5を導入する
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,76 @@
+結局[nuxt-fontawesomeのReadme](https://www.npmjs.com/package/nuxt-fontawesome)を見て解決したのですが、日本語の記事は見つからなかったので(備忘録も兼ねて)記録
+#前提
+Nuxt.jsのプロジェクトにFontAwesome 5の導入が必要になった背景はこの投稿と同じです。
+https://qiita.com/_rema_lp/items/137f0de9e039a464e7db
+以下引用:
+>CSSフレームワークに Bulma を使おうとしたところ、公式ドキュメントが FontAwesome 5 対応になってしました。
+>Nuxt.js 用の FontAwesome パッケージとして @nuxtjs/font-awesome がありますが、こちらはまだ FontAwesome 4 にしか対応していないため他の導入方法を探しました。
+
+`@nuxtjs/font-awesome`を使う代わりに、上記の投稿では`@fortawesome/fontawesome-free-webfonts`を導入しています。
+
+今回私の環境では`nuxt-fontawesome`を導入してみたので、その方法と結果を記します。
+
+#Version
+Nuxt.js: v2.0.0
+@nuxtjs/bulma: v1.2.0
+nuxt-fontawesome: v0.3.0
+
+#方法
+[nuxt-fontawesomeのReadme](https://www.npmjs.com/package/nuxt-fontawesome)の通りにやっていけば出来るようになります。
+
+##導入
+まずnpmで下記のコマンドを叩き、依存性を追加します。
+
+```bash
+$ npm i nuxt-fontawesome
+$ npm i @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome
+$ npm i @fortawesome/free-solid-svg-icons
+```
+
+そうしたら`nuxt.config.js`を開き、`modules`に`nuxt-fontawesome`を追加します。
+`@nuxtjs/bulma`が既に追加されているので、このように追記しました。
+
+```js:nuxt.config.js
+module.exports = {
+ modules: [
+ '@nuxtjs/bulma',
+ 'nuxt-fontawesome' //ここに追記
+ ],
+
+ ...
+
+//この部分を追記
+ fontawesome: {
+ imports: [
+ {
+ set: '@fortawesome/free-solid-svg-icons',
+ icons: ['fas']
+ }
+ ]
+ }
+}
+```
+module以下に追加する部分は二通りの書き方があるようですが、こちらの短い記述で大丈夫でした。
+[Readme](https://www.npmjs.com/package/nuxt-fontawesome)を読むと結構追記する量が多く見えますが、よく見るとコメントで`//OR like this`と書いてあるので1行で大丈夫みたいです。
+
+以上で導入はOKです。
+`npm run dev`で既に起動している場合は一旦停止して再度起動すると変更が適用されます(そのことを知らず、少し悩みました)
+
+##実装
+template以下に`<font-awesome-icon icon="dollar-sign"/>`と書くだけでアイコンが表示されます
+
+
+```vue
+<template>
+ <div>
+ <font-awesome-icon icon="dollar-sign" style="font-size: 30px"/> //styleを指定することも可能
+ <font-awesome-icon :icon="['fas', 'adjust']" /> //こっちの書き方でもOK
+ </div>
+</template>
+```
+
+`npm run dev`で確認してみると、右下の赤矢印で示したボタン左端のようにiconが追加されていることが確認できます
+![doll.png](https://qiita-image-store.s3.amazonaws.com/0/301118/e42177e5-92c9-8ae8-7762-311eb93ddd75.png)
+
+
+