Nuxt•3w ago

Icons not rendered in nuxt/ui v3

Hi! Having the problem that icons are not rendered in my current setup with ui v3 - component is there but no svg is injected ... thats the code i use <UButtonGroup> <UButton @click="cancel" icon="i-lucide-x">close</UButton> <UButton @click="save" icon="i-lucide-save">save</UButton> </UButtonGroup> using "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@5385f84" and no adjustments to icons / ui in the nuxt.config.ts

3 Replies

kapa.ai•3w ago

Hi @czepter. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights into your issue with icons not rendering in Nuxt UI v3. The problem you're experiencing might be related to how icons are handled and bundled in Nuxt UI. Here are a few points to consider: 1. Icon Collections: It's highly recommended to install the icon collections you need locally. As mentioned in the Nuxt UI documentation (https://ui.nuxt.com/getting-started/theming#icons), you should install the specific icon collection you're using. In your case, you're using the Lucide icons, so you might need to install the Lucide collection. 2. Static Declaration: The icons need to be statically declared in your code for the Tailwind engine to bundle them correctly. As explained in a Stack Overflow answer (https://stackoverflow.com/questions/77295827), Nuxt UI uses the tailwindcss-icons plugin, which relies on Tailwind's static analysis to include only the icons declared in your code. 3. Configuration: Make sure you have properly configured the icons in your nuxt.config.ts file. Although you mentioned you haven't made any adjustments, it might be worth checking if the default configuration is correct. To resolve this issue, you could try the following: 1. Install the Lucide icon collection:

   pnpm i @iconify-json/lucide

   pnpm i @iconify-json/lucide

2. Make sure your nuxt.config.ts includes the necessary configuration for icons. You might need to add something like:

   export default defineNuxtConfig({
     modules: ['@nuxt/ui'],
     ui: {
       icons: ['lucide']
     }
   })

   export default defineNuxtConfig({
     modules: ['@nuxt/ui'],
     ui: {
       icons: ['lucide']
     }
   })

3. If the issue persists, you might want to try using the icons directly with the UIcon component to see if it makes a difference:

   <UButtonGroup>
     <UButton @click="cancel"><UIcon name="i-lucide-x" /> close</UButton>
     <UButton @click="save"><UIcon name="i-lucide-save" /> save</UButton>
   </UButtonGroup>

   <UButtonGroup>
     <UButton @click="cancel"><UIcon name="i-lucide-x" /> close</UButton>
     <UButton @click="save"><UIcon name="i-lucide-save" /> save</UButton>
   </UButtonGroup>

If these steps don't resolve the issue, it might be worth checking for any recent changes or known issues in the Nuxt UI repository, as you're using a specific PR version ("@nuxt/ui": "<https://pkg.pr.new/@nuxt/ui@5385f84">). Remember, icon rendering issues can sometimes be tricky to debug. If the problem persists, you might want to create a minimal reproduction of the issue and seek help from the Nuxt UI community or maintainers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

czepterOP•3w ago

does not work as well

Gaming

Programming

Icons not rendered in nuxt/ui v3