Code used to add custom icon to vuetify plugin in NuxtJS3 with Vuetify 3

Vuetify Custom Icon with Nuxt 3 (Nuxt Icon by Atinux).ts

// This file is the custom.ts

import { h } from "vue";
import type { IconSet, IconAliases, IconProps } from "vuetify";
// Custom icon component create
// I am extending the Icon module created by Atinus -> https://github.com/nuxt-modules/icon
import MIcon from "~~/components/MIcon.vue";
/**
 * Code for the icon component looks like this 
 * 
 * <template>
		<div>
			<Icon v-bind="$attrs" />
		</div>
	</template>
 */


/**
 * I am using icon names from Iconess - > https://icones.netlify.app/
 * 
 * Using the Phospor pack here, but any icon name can be used.
 * All of vuetify's core icons must be added in the `aliases` object
 */
const aliases: IconAliases = {
	complete: "ph:check-circle",
	cancel: "ph:x-circle",
	close: "ph:x-circle",
	delete: "ph:trash",
	clear: "ph:x-circle",
	success: "ph:check-circle",
	info: "ph:info",
	warning: "ph:warning",
	error: "ph:x-circle",
	prev: "ph:caret-left",
	next: "ph:caret-right",
	checkboxOn: "ph:check-square-fill",
	checkboxOff: "ph:square",
	checkboxIndeterminate: "ph:square",
	delimiter: "ph:circle",
	sort: "ph:caret-up",
	expand: "ph:caret-down",
	menu: "heroicons:bars-2",
	subgroup: "ph:caret-down",
	dropdown: "ph:caret-down",
	radioOn: "ph:radio-button-fill",
	radioOff: "ph:circle",
	edit: "ph:pencil-simple",
	ratingEmpty: "ph:star",
	ratingFull: "ph:star-fill",
	ratingHalf: "ph:star-half-fill",
	loading: "ph:spinner",
	first: "ph:caret-double-left",
	last: "ph:caret-double-right",
	unfold: "ph:arrows-out",
	file: "ph:file",
	plus: "ph:plus",
	minus: "ph:minus",
};


const custom: IconSet = {
	component: (props: IconProps) =>
		// Return render function
		h(MIcon, { size: "20", name: props.icon, tag: props.tag, disabled: props.disabled }),
};

// export both aliases and the custom object created
export { aliases, custom };

// The @/plugins/vuetify.ts file

import { createVuetify, ThemeDefinition } from "vuetify";
import { aliases, custom } from "@/helpers/custom";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { md3, md2 } from "vuetify/blueprints";

const myLightTheme: ThemeDefinition = {
	dark: false,
	colors: {
		background: "#fff",
		surface: "#fff",
		primary: "#7c3aed",
		secondary: "#6366f1",
		error: "#ef4444",
		info: "#3b82f6",
		success: "#10b981",
		warning: "#f59e0b",
	},
};

export default defineNuxtPlugin((app) => {
	const vuetify = createVuetify({
		// blueprint: md2,
		ssr: true,
		components,
		directives,
		defaults: {
			global: {},
			VSelect: { color: "#00FF00" },
		},
		theme: {
			defaultTheme: "myLightTheme",
			variations: {
				colors: ["primary", "secondary"],
				lighten: 3,
				darken: 3,
			},
			themes: {
				myLightTheme,
			},
		},
    // Add the custom iconset
		icons: {
			defaultSet: "custom",
			aliases,
			sets: {
				custom,
			},
		},
	});

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

Oh interesting, what are the differences to the nuxt-icon lib?

I was having issues when i tried to use the vicon component inside the v-list-item component. It would crash my app or print a lot of warnings in the browser console. Changing the icon component fixed that