2 Replies
Hi @fenish. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The warning
- There is no evidence in the knowledge sources that Nuxt Icon module provides a global
[Vue warn]: Failed to resolve component: Icon usually means that Vue (and thus Nuxt) cannot find a component named <Icon>. Even though you have the Nuxt Icon module, this does not automatically register a global <Icon> component unless the module specifically provides it and you use it as documented.
From the knowledge sources, there is no explicit mention that the Nuxt Icon module provides a global <Icon> component. Instead, the Nuxt Icon referenced in the DevTools documentation is about the DevTools UI, not a component for use in your app's templates. Therefore, if you are trying to use <Icon> in your templates, it will not be resolved unless you have registered such a component yourself or are using a module that does so, and you are following its usage instructions.
If you are using icon libraries (like NuxtUI or tailwindcss-icons), you typically use icon classes (e.g., i-heroicons-user) rather than a component named <Icon>. For example, with NuxtUI, you pass the icon class as a prop to a button or other component, not as a standalone <Icon> component. Also, dynamic icon class names may not work due to how Tailwind and similar tools tree-shake unused classes, so you may need to hardcode icon class names or use a literal object/array as described in the sources:
It uses the egoist/tailwindcss-icons which based on Tailwind engine that bundles only the static icons declared in your code as explained here. So you need to hardcode them statically then get access them using a literal object or an array.Nuxt v-bind not working with NuxtUI icons and util file Summary:
- There is no evidence in the knowledge sources that Nuxt Icon module provides a global
<Icon> component for use in your templates.
- If you want to use icons, follow the documentation for your icon library (e.g., use icon classes with NuxtUI or Tailwind).
- If you need a global <Icon> component, you must create and register it yourself.
If you provide more details about which icon module you are using and how you are trying to use <Icon>, I can give more specific guidance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@253937964193677323> Kapa.ai is still learning and improving, please let me know how I did by reacting below.