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);
});