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

Vuetifyでアイコンを使いたい

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

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

Material Design Icons
Material Icons
Font Awesome 4
Font Awesome 5

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

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

この記事を書いた人

@takasqr アプリケーション開発が大好きなエンジニア。Vue、Swift、Electrom などでアプリを作って公開している。AWS や Firebase などのクラウドサービスも好き。

使い方

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

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

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

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

アイコン一覧

v-iconで使えるアイコンの一覧はアイコンセットのサイトで確認できます。例えばデフォルトで設定されているMaterial Design 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を使用します。

これは公式ページでも、

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

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

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

以下、手順です。

@mdi/jsのインストール
src/plugins/vuetify.jsの設定
【Nuxtのみ】defaultAssetsの設定
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>