nuxt / icon

The <Icon> component, supporting Iconify, Emojis and custom components.
https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue
MIT License
947 stars 57 forks source link

"icon.clientBundle.icons" option not fetching icons #245

Open ptdev opened 2 months ago

ptdev commented 2 months ago

Hi,

Just updated to latest version and was trying out the new icon.clientBundle.icons property but apparently the icons are not getting fetched.

We get the following issue when running "yarn dev -o" or "yarn build":

WARN  Nuxt Icon could not fetch the icon data for client bundle:                                     
 - ic:baseline-home
 - fluent-emoji-high-contrast:minibus
 - game-icons:hiking
 - healthicons:4x4
 - mdi:sail-boat
 - mdi:bus-double-decker
 - material-symbols:paragliding-rounded

Reproduction link:

https://stackblitz.com/edit/nuxt-starter-rhvysv?file=nuxt.config.ts

Thank you, cheers!

antfu commented 2 months ago

Yeah, it doesn't do the network fetch. I agree we should improve the message to guide users to install packages @iconify-json/*

ptdev commented 2 months ago

Yeah, it doesn't do the network fetch. I agree we should improve the message to guide users to install packages @iconify-json/*

Do we really need to add those packages manually, even with the new "scan" option?

We were trying to avoid having to install those packages since we only use some icons and they greatly increase the bundle size. So we had those most used icons hardcoded on "clientBundle.icons" and also have the "clientBundle.scan" option enabled.

From the docs we assumed that this would add the hardcoded icons and then scan the rest of the app for the other icons it finds and therefore include only the icons that are actually used (?)

Cheers

antfu commented 2 months ago

Yes you need to install them for the build process to get the data. If you don't want to bundle them in the server, you can set serverBundle: false