Nuxt•7mo ago

Nuxt UI in Vite: Icons loading issue

Hi, I have a problem in nuxt/ui integration in vite, unfortunately my client during testing let me know “Looking into this, we found that the application is trying to load the icons from different internet servers - and access to those servers is blocked when working from the office.”. So I leave with the question, how am I able to deliver the icons? I tried adding the @iconify package to package.json, but it didn't help (as far as I can see it only works for plugging into nuxt)

5 Replies

kapa.ai•7mo ago

Hi @malelus. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To ensure Nuxt UI icons work in environments where external internet access is blocked, you need to serve the icon data locally rather than relying on Iconify's CDN. Simply adding the @iconify package to your package.json is not enough. Here’s how you can deliver icons locally in a Nuxt UI + Vite setup: 1. Install the Iconify JSON Collection Locally
For each icon set you use (e.g., lucide, uil, etc.), install its JSON data package. For example, for the Lucide icon set:

   npm install @iconify-json/lucide

   npm install @iconify-json/lucide

or with pnpm:

   pnpm i @iconify-json/lucide

   pnpm i @iconify-json/lucide

This ensures the icon data is available in your node_modules and can be bundled with your app, not fetched from the internet at runtime. 2. (Optional) Use Custom Local SVG Collections
If you want to use your own SVGs, you can create a custom collection. Place your SVG files in a directory (e.g., assets/icons) and configure Nuxt to use them:

   // nuxt.config.ts
   export default defineNuxtConfig({
     icon: {
       customCollections: [{
         prefix: 'custom',
         dir: './assets/icons'
       }]
     }
   })

   // nuxt.config.ts
   export default defineNuxtConfig({
     icon: {
       customCollections: [{
         prefix: 'custom',
         dir: './assets/icons'
       }]
     }
   })

Then use them in your components:

   <template>
     <UIcon name="i-custom-add" />
   </template>

   <template>
     <UIcon name="i-custom-add" />
   </template>

More details here. 3. No Further Configuration Needed for Nuxt UI
Nuxt UI automatically registers the @nuxt/icon module, so once the icon data is installed locally, it will use the local data instead of fetching from the CDN, as long as the icon collection is present in your dependencies. Summary:
Install the relevant @iconify-json/{collection} packages for the icon sets you use. This will allow Nuxt UI to serve icons locally, solving the issue for environments with restricted internet access. If you need custom icons, use the custom collections feature as shown above. For more information, see the official Nuxt UI documentation on local icon collections and serving icons locally. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@337291995443757056> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

malelusOP•7mo ago

@kapa.ai I don't use Nuxt, I use integration for Vue (by adding a plugin in vite.config.ts)

kapa.ai•7mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for clarifying that you are using Nuxt UI in a plain Vue project via the Vite plugin, not in a Nuxt app. Based on the official Nuxt UI documentation for Vue integration, the process for using icons is similar to Nuxt, but the documentation does not explicitly state how to ensure icons are served locally in a Vue + Vite setup. The instructions for local icon data and custom collections are only detailed for Nuxt projects, where the @nuxt/icon module is automatically registered and can be configured for local collections or local iconify datasets Getting-started > Icons > Collections. For Vue projects, the documentation shows how to use the Nuxt UI Vite plugin and how to use the <UIcon /> component with icon names from Iconify, but it does not provide explicit steps for serving icon data locally or configuring custom icon collections in a non-Nuxt environment Getting-started > Icons (Vue). Summary:
I'm sorry, but the knowledge sources do not explicitly mention how to configure Nuxt UI's icon system to serve icons locally in a plain Vue + Vite project. The local icon dataset and custom collection features are only documented for Nuxt projects. If you need this functionality, you may need to consult the Nuxt UI or Iconify documentation directly, or consider opening an issue or discussion with the Nuxt UI team for Vue integration support. If you have further questions about Nuxt UI in a Nuxt project, I can provide more detailed guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@337291995443757056> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt UI in Vite: Icons loading issue

Did you find this page helpful?