search

vuetifyjs / nuxt-module

Zero-config Nuxt Module for Vuetify
https://nuxt.vuetifyjs.com/
MIT License
220 stars 22 forks source link

[Feature Request] Use or recommend NuxtIcon as default icon component #280

Open kingyue737 opened 1 month ago

kingyue737 commented 1 month ago

NuxtIcon is the official icon library of Nuxt. Since v1, <Icon> and <IconCSS> have been merged into one component, making integration more convenient. (Thus the instructions in the docs need a small fix).

Since v1.5 https://github.com/nuxt/icon/pull/243 NuxtIcon can include only used icons in the client bundle which does the same as UnoCSS Icon.

NuxtIcon supports Vuetify default icon naming like mdi-* .

Many users do not use UnoCSS with Vuetify since Vuetify has its own CSS utilities or they may prefer Tailwind. In my opinion, although I love Antfu Universe, replacing UnoCSS Icon with Nuxt Icon (which was also rewritten by antfu) makes the icon configuration of this module less opinionated.

Bonus: we can also maintain aliases for different icon sets

userquin commented 1 month ago

NuxtIcon was updated by Anthony to add support on server side (previous version was client only iirc), I can check the integration here.

You can use UnoCSS preset icon, will not use any UnoCSS rules, we added default implementation since we can use Vuetify css class icon set.

Anyway, both approach are disparate, read NuxtIcon documentation since the icons require an endpoint. You can also bundle your common used icons on client bundle but still requires an extra request (I'm not sure if unused icons from provided collections will be removed from the final bundle).

kingyue737 commented 1 month ago

You can use UnoCSS preset icon, will not use any UnoCSS rules

Yeah, but still need to install UnoCSS. Install a CSS engine only for icon seems a little overkill. Forgive my OCD.

You can also bundle your common used icons on client bundle but still requires an extra request (I'm not sure if unused icons from provided collections will be removed from the final bundle).

With scan, no need to provide collections in config, just make sure they are installed. Only icons whose names exist in the source code will be bundled.

the icons require an endpoint.

With scan, no endpoint is required. scan was introduced last month, it might be enabled by default in the future.

but still requires an extra request

All icons are included in client module. 🤔 I don't think it requires an extra request compared to other methods. It may depends on chunk strategy?

Refer: https://github.com/nuxt/icon?tab=readme-ov-file#scan-components

Anyway, just an opinion because I think NuxtIcon is now better as a default option. It can achieve the main functions of UnoCSS Preset Icon except configuring the icon via class.