[Feature Request] iconify-icon support
Endermanch opened this issue · comments
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/
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.
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.