Why my Nuxt-Icon color cannot able to change color?
I have tried every method such as add code "fill",add file"app.config.ts",or add "fill= currentcolor" in svg,but the icon color no change in black .
Can anyone tell me what causes this?
The version of Nuxt-Icon is v1.15.0 .
Solution:Jump to solution
Hi @cocoa-c. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
3 Replies
Solution
Hi @cocoa-c. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The knowledge sources do not provide a direct explanation for why your Nuxt-Icon color is not changing when you try to use the "fill" property or modify app.config.ts. However, based on the official Nuxt UI documentation, here are some important points to consider:
1. Icon Color is Controlled by CSS: Nuxt UI icons (using Iconify) are styled using CSS, typically inheriting the current text color (
color property), not the fill attribute. If your icon remains black, it may be because the parent element or the icon itself does not have a different color set.
2. No Direct "fill" Prop: There is no mention in the documentation of a fill prop or attribute for Nuxt UI icons. Instead, you should use CSS classes (like Tailwind's text-blue-500) to change the icon color.
3. app.config.ts and Icon Colors: The app.config.ts file is used to configure which icon is used for each alias, not their color. Changing the icon mapping here will not affect the color of the icon rendered in your components Icons Theme.
4. How to Change Icon Color: To change the color, apply a CSS class to the icon component. For example:
This will render the icon in red, assuming you are using Tailwind CSS.
5. SVG Color Limitation: If you use a custom SVG icon that has a hardcoded fill or stroke attribute, it may override CSS color. Make sure your SVGs use currentColor for their fill/stroke so they inherit the CSS color.
If you have followed these steps and the icon color still does not change, the issue may be with how the icon is being rendered or with your project's CSS setup. The documentation does not provide further troubleshooting steps for this specific issue.
For more details, see the official documentation on Icons Theme and Custom Local Collections.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@965234422876098614> Kapa.ai is still learning and improving, please let me know how I did by reacting below.