How to import custom svg icons in vuetify 3?

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