概要

この記事では、Vuetify のアイコンフォントである Material Design Icons (mdi)を本番環境で使用する方法について解説します。

インストール方法

Vuetify のアイコンフォントである Material Design Icons (mdi)は、npm パッケージとして提供されています。

install 方法

npm install @mdi/js -D

もしも、既に＠mdi/font をインストールしている場合は、アンインストールしてください。

npm uninstall @mdi/font -D

使用方法

import { aliases, mdi } from 'vuetify/iconsets/mdi' // [!code --]
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg' // [!code ++]

const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
})

template

<template>
  <v-icon :icon="mdiAccount" />
</template>

script

<script setup>
import { mdiAccount } from '@mdi/js'
</script>

まとめ

本番環境で必要な mdi のみを使用する方法について解説しました。