Vuefityでv-iconを使う方法【本番用の設定も紹介】

Vuetifyでアイコンを使いたい

Vuetifyでサイトにアイコンを表示する方法を紹介します。 Nuxtで行う方法も紹介します。

公式ページによると、Vuetifyは4種類のアイコンセットに対応しています。

• Material Design Icons
• Material Icons
• Font Awesome 4
• Font Awesome 5

デフォルトでMaterial Design Iconsが設定されています。

Font Awesomeなどを使いたい場合は、こちらに変更方法が書いてあります。

使い方

Material Design Iconsをv-iconコンポーネントを使って表示します。

<v-icon>
  mdi-twitter
</v-icon>

例えば、このコードでTwitterのアイコンが表示されます。

表示させたいアイコンはMaterial Design Iconsのページで探すことができます。

アイコン一覧

v-iconで使えるアイコンの一覧はアイコンセットのサイトで確認できます。 例えばデフォルトで設定されているMaterial Design Iconsであれば、このサイトで確認できます。

アイコンセットの公式サイト一覧

• Material Design Icons
• Font Awesome
• Material Icons

v-btnの中でv-iconを使う

v-btnの中でv-iconを使うことができます。

<v-btn>
  Accept
  <v-icon>
    mdi-checkbox-marked-circle
  </v-icon>
</v-btn>

v-iconをボタンとして使う

v-iconに直接クリックイベントを設定する方法。

<v-icon
  @click="clickEvent"
>
  mdi-chevron-right
</v-icon>

円形のv-btnで包んで使う方法。

<v-btn
  fab
  href="https://github.com/takasqr"
>
  <v-icon>
    mdi-twitter
  </v-icon>
</v-btn>

この方法だと、v-btnにクリックイベントやhrefをつけて使いやすいです。 デザイン的にもv-btnにelevationを付けて立体感をつけたりと調整しやすいと思います。

v-icon color

アイコンに色を付けるにはcolorで指定します。

<v-icon
  color="green darken-2"
>
  mdi-twitter
</v-icon>

カラーコードでも指定できます。

<v-icon
  color="#000000"
>
  mdi-twitter
</v-icon>

カラー一覧はこちら

Colors | VUETIFY

本番用の設定にする

非常に簡単にアイコンを表示させれるv-iconコンポーネントですが、一つ問題があります。

それは初期設定のままだと、使用しないアイコンまで読み込んでしまい、ページの初期表示の負担になってしまうことです。

そこで、使用するアイコンのみ読み込むようにします。@mdi/jsを使用します。

これは公式ページでも、

これは、本番環境用にアプリケーションを最適化する際に推奨されるインストールです。

使用するアイコンのみをカスタムインポートすることで、バンドルサイズを大幅に小さくすることが出来ます。

と紹介されている方法です。

以下、手順です。

1. @mdi/jsのインストール
2. src/plugins/vuetify.jsの設定
3. 【Nuxtのみ】defaultAssetsの設定
4. v-iconでアイコンを表示

1. @mdi/jsのインストール

@mdi/jsをインストールします。

npm install @mdi/js -D

2. src/plugins/vuetify.jsの設定

vuetify.jsの設定をします。 Nuxtの場合はnuxt.config.jsです。

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

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

3. 【Nuxtのみ】defaultAssetsの設定

NuxtではdefaultAssetsのiconsをfalseにしないと、デフォルトのアイコンセットが読み込まれるままの状態になってしまうので、falseにします。

ここに詳しく書いてあります。

    defaultAssets: {
      icons: false
    },

Nuxtは最終的にnuxt.config.jsがこうなります。

    defaultAssets: {
      icons: false
    },
    icons: {
      iconfont: 'mdiSvg'
    },

4. v-iconでアイコンを表示

試しに、TwitterとGitHubのアイコンを表示します。

<template>
  <v-icon>
      {{ mdiTwitterSvgPath }}
  </v-icon>
  <v-icon>
      {{ mdiGithubSvgPath }}
  </v-icon>
</template>

<script>
import { mdiTwitter, mdiGithub } from '@mdi/js'

export default {
  data () {
    return {
      mdiTwitterSvgPath: mdiTwitter,
      mdiGithubSvgPath: mdiGithub
    }
  }
}
</script>