Nuxt•3mo ago

Custom UIcon doesn't change

My Nuxt UIcon isn't changing the color

message.txt

17 Replies

Hi @Winnieh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It depends on what you’re trying to change: - If you mean the “theme color” (e.g., primary/neutral) used by Nuxt UI components, set or update color aliases at runtime via app.config.ts under ui.colors. For example:

// app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      neutral: 'zinc'
    }
  }
})

// app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      neutral: 'zinc'
    }
  }
})

This affects component color props like color="primary". You can extend available aliases via ui.theme.colors in nuxt.config.ts. [Theme; Installation options] - If you’re using UIcon specifically and want to change the icon itself, set the name prop (e.g., <UIcon name="i-lucide-lightbulb" />). Ensure the icon’s collection is available; for reliability with SSR, install the iconify dataset locally (e.g., @iconify-json/lucide) or add a custom collection. [Icon; Iconify dataset] - If your icons don’t appear or don’t change when bound dynamically, remember Tailwind’s content scanning can miss dynamic class names (for CSS-mode icons). Prefer static icon names or use UIcon’s name prop, and install collections to avoid missing icons. [SO: icons scanning] If you can share whether you’re trying to change the UIcon’s “color prop/theme alias” or the icon glyph itself, I can provide a minimal example tailored to your setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

WinniehOP•3mo ago

@kapa.ai but I'm using <UIcon name="i-custom-fivelogs" mode="css" class="size-10 text-amber-400" />

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- When using UIcon in CSS mode, the icon is rendered via a utility class (e.g., i-custom-fivelogs). To color it with Tailwind classes like text-amber-400, ensure: 1) The icon is available locally - If it’s from Iconify, install the collection (or define a custom local collection). For custom SVGs: - Put SVGs in assets/icons (or your chosen dir). - Configure nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  icon: {
    customCollections: [{ prefix: 'custom', dir: './app/assets/icons' }]
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  icon: {
    customCollections: [{ prefix: 'custom', dir: './app/assets/icons' }]
  }
})

Then use: <UIcon name="i-custom-fivelogs" />. [Iconify dataset] 2) The class is statically present - Tailwind’s CSS-mode icons rely on static class names. Dynamic construction can cause the icon (and styles) to be purged. Keep name="i-custom-fivelogs" literal in your template. [SO post] 3) The SVG can be tinted - CSS-mode icons expect the icon to inherit currentColor. If your custom SVG has hardcoded fills/strokes, text-amber-400 won’t apply. Ensure your SVG paths use fill="currentColor" or stroke="currentColor". If you still have issues, try SVG mode to bypass Tailwind’s content scan/purge and confirm coloring:

<UIcon name="i-custom-fivelogs" mode="svg" class="size-10 text-amber-400" />

<UIcon name="i-custom-fivelogs" mode="svg" class="size-10 text-amber-400" />

(UIcon supports mode="svg" or "css".) [Icon] Tip: Installing the icon set locally improves reliability on SSR/client. [Iconify dataset] ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

WinniehOP•3mo ago

@kapa.ai Does my svg need a width and height in the svg

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Short answer: no, it doesn’t need width/height to be colorable with UIcon. Key points: - In CSS mode, UIcon applies color via currentColor. Your SVG must use fill="currentColor" or stroke="currentColor" (not hardcoded colors). [Icon] - Ensure the icon class name is static so Tailwind doesn’t purge it. [NuxtUI icons issue] - Provide the icon via a local/custom collection (e.g., i-custom-...) so it’s reliably available in SSR/CSR. [Iconify dataset] Width/height can be omitted; sizing can come from Tailwind classes (e.g., size-10). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

WinniehOP•3mo ago

and does it need an viewbox? @kapa.ai

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- No, a viewBox isn’t strictly required for color to work, but it’s recommended for proper scaling: - Color: In CSS mode, UIcon colors via currentColor. Ensure your SVG paths use fill="currentColor" or stroke="currentColor". [Icon] - Sizing/responsiveness: A viewBox allows the icon to scale cleanly with classes like size-10. Without viewBox, scaling can behave incorrectly even if color applies. Nuxt UI docs don’t mandate viewBox, but it’s standard for scalable icons. I'm sorry, but there's no information explicitly stating a requirement for viewBox in the provided sources. [Icon] ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

WinniehOP•3mo ago

@kapa.ai this message.tx file is my svg, is their someting wrong and how can i now use UIcon with this svg

message.txt

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To use your own SVG with UIcon, add it as a custom Iconify collection, then reference it by name. 1) Place your SVG in a folder for custom icons, e.g. app/assets/icons/fivelogs.svg. 2) Register the folder in nuxt.config.ts with a custom collection:

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

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

This makes the icon available as i-custom-fivelogs. [Custom collections] 3) Use it with UIcon:

<template>
  <UIcon name="i-custom-fivelogs" mode="css" class="size-10 text-amber-400" />
</template>

<template>
  <UIcon name="i-custom-fivelogs" mode="css" class="size-10 text-amber-400" />
</template>

If the color doesn’t apply, ensure your SVG paths use fill="currentColor" or stroke="currentColor" (avoid hardcoded colors). You can also try mode="svg" if needed:

<UIcon name="i-custom-fivelogs" mode="svg" class="size-10 text-amber-400" />

<UIcon name="i-custom-fivelogs" mode="svg" class="size-10 text-amber-400" />

UIcon supports mode="svg" or "css". [Icon] If your icon still doesn’t appear, keep the icon name literal (not dynamically built) so Tailwind and the icon resolver can detect it. [SO post] ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

WinniehOP•3mo ago

@kapa.ai The icon does appear but the color stays white

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If the icon shows but stays white, it’s usually one of these: - The SVG has hardcoded fill/stroke. For CSS-mode coloring, paths must use currentColor so Tailwind text-amber-400 can apply. Edit your SVG to replace fill="#fff" (or similar) with fill="currentColor" (and/or stroke="currentColor"). Then use: <UIcon name="i-custom-fivelogs" mode="css" class="size-10 text-amber-400" /> [Icon] - Verify the icon name is literal (not built dynamically) so the CSS-mode class is generated. [Nuxt v-bind issue] - As a quick test, switch to SVG mode (still uses currentColor for tinting if the SVG isn’t hardcoded): <UIcon name="i-custom-fivelogs" mode="svg" class="size-10 text-amber-400" /> [Icon] - Ensure your custom icon is registered via a custom collection (so UIcon resolves it correctly): nuxt.config.ts → icon.customCollections [{ prefix: 'custom', dir: './app/assets/icons' }] and then name="i-custom-fivelogs". [Custom collections] ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

Gaming

Programming

Custom UIcon doesn't change

Did you find this page helpful?