[Feature Request] iconify-icon support

[Andrew]

Since Nuxt is an SSR-oriented framework, I would like to propose a shift from @iconify/vue to iconify-icon, as that would make rendering heaps more consistent and lighter, reaping the benefits of using a Shadow DOM.

Reads:
vuetifyjs/vuetify#7821 (comment)
https://iconify.design/docs/iconify-icon/

[Vjacheslav Trushkin]

Yes, this is a very good idea.

I'm actually using iconify-icon with Nuxt on new Iconify icon sets website, it is way better for SSR than @iconify/vue. Works flawlessly.

One minor change is it requires adding this line to Nuxt config (it works fine without it, but shows warnings in console in dev mode):

	vue: {
		compilerOptions: {
			isCustomElement: (tag) => tag === 'iconify-icon',
		},
	},

Additionally, version 2 of web component has major performance increase. It uses IntersectionObserver to check if icon is visible, does not render icons that aren't visible to visitor.

Old Iconify components, such as @iconify/vue (and especially @iconify/react) has been a big pain to maintain because of SSR. In future I'm planning to deprecate them, asking users to switch to web component.

[danwithabox]

This would be very much appreciated from the point of view of a new Nuxt adopter 🎉

As I'm evaluating the framework, coming across such situations where the "best" solution differs from the "official" solution causes some friction and unease.