Vueにマテリアルデザインのアイコンを追加する方法

Vue.jsにVuetifyのMaterial Design Iconを追加する方法

by

今日はVueにMaterial Designのアイコンの追加の仕方を紹介します。公式のドキュメンテーションが分かりづらかったので、役に立つと思います。

Vuetifyのインストールはこちらを確認してください。

Material Designとは

Material Designは、Googleによって開発されたデザインシステムであり、ユーザーインターフェース（UI）のデザイン原則とガイドラインの集合体です。現実の物理的な素材や表面の振る舞いを模倣することで直感的なインターフェースを提供し、ユーザーエクスペリエンスを向上させます。シンプルでクリーンなデザインと視覚的な一貫性を重視し、さまざまなプラットフォームで使用されます。


Material Design Iconsとは

Material Design Iconsは、Googleが提供する無料のオープンソースのアイコンセットです。Material Designシステムに基づいており、さまざまなカテゴリやテーマのアイコンが含まれています。ベクターフォーマットで提供され、拡大縮小しても画質が損なわれません。デザイナーや開発者にとって便利なリソースであり、一貫性のあるデザインを実現するのに役立ちます。オープンソースであり、自由に使用できます。

①VuetifyからMDIをインポートする方法

MDI（Material Design Icons）をVuetifyからインポートする方法です。

 src/plugins/vuetify.jsもしくはmain.jsに下記を追加

import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi'

export default createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
})

テンプレートでこのように定義できます。

<template>
  <v-icon icon="mdi-home" />
</template>

②Material DesignのSVGを使う方法

これは、アプリケーションを本番環境向けに最適化する際に推奨されるインストール方法です。Vuetifyコンポーネントで内部的に使用されるアイコンのみがアプリケーションバンドルにインポートされます。アプリケーションの他の部分には、独自のアイコンを提供する必要があります。

src/main.js

import { createApp } from 'vue';
import App from './App.vue';
// Vuetify
import 'vuetify/styles';
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

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

const app = createApp(App);
app.use(vuetify);
app.mount('#app');

ではMDIからアイコンをインストールします。

$ yarn add @mdi/js -D
// OR
$ npm install @mdi/js -D

これでコンポーネントから必要なアイコンをインポートしてv-iconコンポーネントで使えるようになります。

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

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

他にも、FontAwesomeが使えたりするので必要に応じて調べてみましょう。

お疲れ様です。