Nuxt Icons unable to resolve the components/global icons when components prefix has been disabled
xxFREESHROUDxx opened this issue · comments
I am using nuxt-icon ^0.4.2 and i have auto imports enabled in which the icons are working properly like this:
<Icon name="LeafIcon" /> // LeafIcon is icon component inside components/global
But when I try to remove/disable suffix for the components folder for auto imports like this in my nuxt.config.ts it is not working (ie. above global icon not working ):
export default defineNuxtConfig({
components: [
{
path: '~/components',
pathPrefix: false
}
]
)}
I also tried to enable prefix for components/global folder as that might be the issue causing the global icon not being imported.
export default defineNuxtConfig({
components: [
{
path: '~/components',
pathPrefix: false
},
{
path: '~/components/global',
pathPrefix: true
}
]
)}
Even after doing this I was not able to solve this issue. Is there anything wrong that I have been doing or is it just the issue of nuxt? I just wanted to remove the prefix for components folder as working with larger components nested inside components folder like components/page/search/TopBanner.vue
would make things complicated as we have to write <PageSearchTopBanner />
for auto importing that component. Please help on this as I am not able to use the components/global icons for my nuxt-icon.
Could you check in the Nuxt Devtools, in the components tabs the names of your components?
I am talking about the Nuxt Devtools
I can see this <Icon />
being used in the nuxt devtools. nuxt icon is working but just for the custom icon components inside components/global is not working.
In the user components in nuxt devtools, I can see the name of my custom component inside components/global:
This is the nuxt icon being used here:
After further inspection, it seems like whenever I add the components: []
inside nuxt.config.ts something happens:
export default defineNuxtConfig({
components: []
)}
Causing the custom icon components to not work. Is there any way of putting global just outside the components folder and then making it usable for the custom icon components for nuxt icons?
I am using nuxt-icons version 0.4.2
Then ArrowIcon
should work.
You can see a working playground on https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue
Nope, it's not working as something when
export default defineNuxtConfig({
components: [
{
path: '~/components',
pathPrefix: false
}
]
)}
is added to the nuxt.config.ts is causing this issue.
You can check this as I have replicated what I wanted and added some comments there. This should be expected to work but it's not working. I tried workaround like making pathPrefix true for components/global in the nuxt config which also seems to not work.
https://stackblitz.com/edit/nuxt-icon-playground-1kycsn?file=app.vue
Could you try adding the global: true
?
Close as this should be no longer relevant with Nuxt Icon v1