Nuxt.js Vuetify2系でFontAwesome5(無料)とmaterial-icon、Font Awesome SVGを導入する

# はじめに

Nuxt.jsでVuetify2系を使っている場合に、FontAwesome5(無料)を導入する方法がわからなくて、調べちゃったので備忘録として残します。

以下の手順でGithubで公開しています。

https://github.com/idani/nuxt-vuetify-fontAwesome5

# 初期状態

Nuxt.jsでVuetifyを導入した初期プログラムを作成しました。
ダークモードは見づらいのでオフにして、
`index.vue`を以下のように修正しています。

```vue
<template>
  <v-layout column justify-center align-center>
    <v-flex xs12 sm8 md6>
      <v-card>
        <v-row justify="space-around">
          <v-col>
            <v-icon>mdi-domain</v-icon> //デフォルトのMaterial Design Icons
            <v-icon>home</v-icon>　//Material Icons
            <v-icon>fas fa-lock</v-icon> //Font Awesome 5
          </v-col>
        </v-row>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
export default {}
</script>

```

`v-icon`で、`Material Design Icons`フォント(以後MDI)はデフォルトで表示されました。
`Material Icons`フォント(以後MI)、`Font Awesome 5`フォント(fa5)は表示されません。

![2020-04-07_14h49_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/8798ba8a-c024-f09c-b518-f24184fd41ae.png)

# FontAwesome5の導入

`vuetify`の[Font Awesome 5 アイコンのインストール](https://vuetifyjs.com/ja/customization/icons/#font-awesome-5-%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)を参考にしています。

まずは、フォントの導入

```shell
yarn add @fortawesome/fontawesome-free -D
```

Pluginsフォルダに`vuetify.js`を作成して、ドキュメントの通りに記載

```javascript:src/plugins/vuetify.js
// src/plugins/vuetify.js

import '@fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'fa',
  },
})
```

`nuxt.config.js`に先程作成した`plugins/vuetify`を追記します。

```javascript:nuxt.config.js
~~~省略
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: ['plugins/vuetify'],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '@nuxtjs/vuetify'
  ],
  /*
~~~省略
```

FontAwesome5のフォントが表示されるようになりました。

![2020-04-07_15h02_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/16a5bc9d-2d63-5e58-60c8-793024dbfbe7.png)

# material-iconの導入

[Material Iconsのインストール](https://vuetifyjs.com/ja/customization/icons/#material-icons%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)を参考に進めます。


`material-icon`をインストールします。

```shell
yarn add material-design-icons-iconfont -D
```

`plugins/vuetify.js`を以下のように修正します。

```javascript:src/plugins/vuetify.js
// src/plugins/vuetify.js

import '@fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: ['fa', 'md']
  }
})

```

以下のように表示されました
![2020-04-07_15h08_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/48acb6b0-7b54-60ff-1910-43653133485f.png)


# Font Awesome SVG アイコンのインストール

[Font Awesome SVG アイコンのインストール](https://vuetifyjs.com/ja/customization/icons/#font-awesome-svg-%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)を参考にしていきます。

まずは、インストール済みの`Font Awesome 5`を削除します。

```shell
yarn remove @fortawesome/fontawesome-free -D
```

`plugins/vuetify.js`も以下のよう修正します。

```javascript:plugins/vuetify.js
// src/plugins/vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: ['md']
  }
})
```

FontAwesome5を使った時計アイコンが非表示になりました。
![2020-04-07_15h16_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/36c228f3-368c-086d-d71a-6985a283152a.png)

FontAwesome5 SVGをインストールします。

```shell
yarn add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons -D
```

`plugins.vuetify.js`を以下のように書き換えます。

```javascript:plugins/vuetify.js
// src/plugins/vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'

Vue.component('font-awesome-icon', FontAwesomeIcon) // Register component globally
library.add(fas) // Include needed icons

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: ['md', 'faSvg']
  }
})
```

最後に、SVG版のフォントは`v-icon`ではなく、`font-awesome-icon`タグで使うようです。
以下のように`font-awesome-icon`を追加します。

```vue:index.vue
<template>
  <v-layout column justify-center align-center>
    <v-flex xs12 sm8 md6>
      <v-card>
        <v-row justify="space-around">
          <v-col>
            <v-icon>mdi-domain</v-icon>
            <v-icon>home</v-icon>
            <v-icon>fas fa-lock</v-icon>
            <font-awesome-icon :icon="['fas', 'lock']"></font-awesome-icon>
          </v-col>
        </v-row>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
export default {}
</script>

```

以下のように表示されます。

![2020-04-07_15h49_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/f746b113-b77b-3ae2-48ac-b4b9dd31fd92.png)

以下のURLで、`v-icon`で表示する方法も書かれています。
私自身が、これ以上必要としないので、以下のURLを出しておしまいといたします。

https://stackoverflow.com/questions/55207257/fontawesome-svg-icons-with-vuetify-how-to-use-within-v-icon-prepend-icon