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であれば、このサイトで確認できます。
アイコンセットの公式サイト一覧
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>
カラー一覧はこちら
本番用の設定にする
非常に簡単にアイコンを表示させれる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>
