Vue3 Vuetify3のv-iconでカスタムSVGアイコンを表示させる #Vue.js

Vuetifyで標準になっているMaterial Design Icon(MDI)に使いたいアイコンが無く、XDなどのデザインからアイコンをsvgで書き出しv-iconで使う方法をメモ

まずはデフォルトのアイコン使用

デフォルトアイコンの@mdi/fontはどうやらかなり重いらしく、使いたいところで使う分だけインポートして使うという方法が良いということなので
下記の記事を参考に実装。
Vuetify3でマテリアルアイコン(mdi)を使う際のベストプラクティス
このようになります。

src/plugins/vuetify.ts

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';

import { createVuetify } from 'vuetify'

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

実際にアイコンを使用するときは下記のような記述になります。

Icon.vue

<script lang="ts" setup>
import { mdiAccount } from '@mdi/js'
</script>
<template>
  <v-icon :icon="mdiAccount"></v-icon>
</template>

無事アイコンが表示されました。

カスタムSVGアイコンをv-iconで表示

今回はviteでプロジェクト作成するとデフォルトで入ってるviteのアイコンを使っていきます。

1. カスタムSVGアイコンのコンポーネントファイルを作成する

componentsディレクトリ配下にiconsフォルダを作成し、ViteIcon.vueを作成する。
ファイル自体は利用したいSVGデータをtemplateタグで囲ってあげるだけです。

src/components/icons/ViteIcon.vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
</template>

2. カスタムSVGアイコンをv-iconで表示させる

デフォルトのmdiアイコンを使うときとやり方は一緒で、
作成したアイコンコンポーネントをインポートしてv-iconのiconに渡すだけです。

Icon.vue

<script lang="ts" setup>
import viteIcon from "@/components/icons/ViteIcon.vue";
import { mdiAccount } from '@mdi/js'
</script>
<template>
  <v-icon :icon="mdiAccount"></v-icon>
  <v-icon :icon="viteIcon"></v-icon>
</template>

このようにちゃんと表示されました。

vue2、vuetify2.xの時はvuetify.tsのicons.valuesに定義して$vuetify.icons.コンポーネント名とかで使えてたので同じ方法でトライしようとしたけど出来なかったので今回のような方法で実装しました。
もっと良い方法とかあればコメント頂けると嬉しいです。