nuxt ui icons local bundle do i also need to install the icon library locally?
So with the nuxt ui icons im using " icon: {
clientBundle: {
// scan all components in the project and include icons for fast load speeds
scan: true,
},
}," to scan the icons i used to be bundled, do i also need to install the icon libraries through pnpm that im using or not in this case?
2 Replies
Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
If you are using the Nuxt UI icons feature with the
icon.clientBundle.scan: true option, this will scan your components and bundle only the icons you actually use for faster load speeds. However, the official Nuxt UI documentation still highly recommends installing the icon data locally for the collections you use (e.g., @iconify-json/lucide for Lucide icons). This ensures that the icons are served locally, which is more reliable and faster, especially for SSR and client-side rendering.
For example, to use Lucide icons, you should run:
This step is recommended even if you use the scan/bundle feature, as it guarantees the icon data is available locally and not fetched from a CDN at runtime. The documentation states:
It's highly recommended to install the icon data locally with: pnpm i @iconify-json/{collection_name} ... This way the icons can be served locally or from your serverless functions, which is faster and more reliable on both SSR and client-side.>
Read more about this in the @nuxt/icon documentation.So, yes, you should still install the icon libraries you use via pnpm/yarn/npm even when using the client bundle scan option for optimal performance and reliability Iconify Dataset. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.