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

16055 ワード
material-icon Vuetify JavaScript nuxt.js FontAwesome JavaScript テキストリンク

はじめに

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

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

初期状態

Nuxt.jsでVuetifyを導入した初期プログラムを作成しました。
ダークモードは見づらいのでオフにして、
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> //デフォルトの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)は表示されません。

FontAwesome5の導入

vuetifyのFont Awesome 5 アイコンのインストールを参考にしています。

まずは、フォントの導入

yarn add @fortawesome/fontawesome-free -D

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

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を追記します。

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のフォントが表示されるようになりました。

material-iconの導入

Material Iconsのインストールを参考に進めます。

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

yarn add material-design-icons-iconfont -D

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

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']
  }
})

以下のように表示されました

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

Font Awesome SVG アイコンのインストールを参考にしていきます。

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

yarn remove @fortawesome/fontawesome-free -D

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

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を使った時計アイコンが非表示になりました。

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

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

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

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を追加します。

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>

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

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