Nuxt•2mo ago

NuxtUI icons forced to width and height 1em!

NuxtUI icons forced to width and height 1em! by head style! thats prevent size prob of any icon buton to get correct size!

5 Replies

kapa.ai•2mo ago

Hi @CorrM. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not explicitly mention any issue with Nuxt UI icons being forced to width and height of 1em by a head style, nor do they discuss this affecting the size prop of icon components or buttons. The documentation shows that you can set the icon size using the size prop or by applying a class (e.g., class="size-5") to the <UIcon> component, and there is no mention of a global style overriding these settings. For example:

<template>
  <UIcon name="i-lucide-lightbulb" class="size-5" />
</template>

<template>
  <UIcon name="i-lucide-lightbulb" class="size-5" />
</template>

Icon component usage If you are experiencing this issue, it may be due to a custom style or a specific configuration in your project, but the official documentation does not address or confirm this behavior. If you need to override a global style, you might consider using a more specific CSS selector, but again, this is not covered in the provided sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

CorrMOP•2mo ago

@kapa.aiworkaround by add:

icon: {
        mode: "css",
        cssLayer: "base",
    },

icon: {
        mode: "css",
        cssLayer: "base",
    },

to app config

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not contain any information about fixing Nuxt UI icon sizing issues by adding the following to your app config:

icon: {
  mode: "css",
  cssLayer: "base",
}

icon: {
  mode: "css",
  cssLayer: "base",
}

There is no mention of the mode or cssLayer options for the icon configuration in the official documentation or examples provided. The sources only describe using the size prop or CSS classes to control icon size, and do not discuss this specific workaround or configuration option. If you have found this solution elsewhere, it is not documented in the official Nuxt UI resources included here, so I cannot confirm its validity or recommend it based on the available information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

NuxtUI icons forced to width and height 1em!

Did you find this page helpful?