[FIXED] How to import custom svg icons in vuetify 3?

Issue

How to import custom svg icons in vuetify3 and nuxt3?

In vuetify 2, we were able to directly import svg icons like this

import customIcon from './myIcon.vue'
Vue.use(Vuetify)
export default new Vuetify({
  icons: {
    iconfont: 'mdi',
    values: {
      myIcon: {component: customIcon}
    },
  },
})

---------------

// Used like this in vue file
<v-icon>$myIcon</v-icon>

From veutfiy 3 documentation, I am confused about importing custom svg icons as it is using sets instead of values. https://next.vuetifyjs.com/en/features/icon-fonts/

// plugins/vuetify.js
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { aliases, mdi } from "vuetify/iconsets/mdi";
export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    icons: {
      defaultSet: "mdi",
      aliases,
      sets: {
        mdi,
      },
    },
  });
  nuxtApp.vueApp.use(vuetify);
});

Solution

Found a way to use both mdi and custom svg icons

Icon file

//tickicon.vue
<template>
<svg>... icon here</svg>
<template>

//customSvgs.ts
import { h } from "vue";
import type { IconSet, IconProps } from "vuetify";
import tickIcon from "./customSVGs/tickicon.vue";
import closeIcon from "./customSVGs/close-icon.vue";

const customSvgNameToComponent: any = {
  tickIcon,
  closeIcon,
};

const customSVGs: IconSet = {
  component: (props: IconProps) => h(customSvgNameToComponent[props.icon]),
};

export { customSVGs /* aliases */ };

And my vuetify plugin file

// plugins/vuetify.ts
import { createVuetify } from "vuetify";
import { mdi } from "vuetify/iconsets/mdi";
import { customSVGs } from "~~/assets/customSVGs";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    icons: {
      defaultSet: "mdi",
      sets: {
        mdi,
        custom: customSVGs,
      },
    },
  });

  nuxtApp.vueApp.use(vuetify);
});

Using like that in vue file

<v-icon icon="custom:tickIcon"/> //Custom SVG Icon 
<v-icon icon="mdi-arrow-up"/>  //default mdi icon

Answered By - Rookie Coder

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)