nuxt / icon

The <Icon> component, supporting Iconify, Emojis and custom components.
https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue
MIT License
868 stars 37 forks source link

Nuxt Icons unable to resolve the components/global icons when components prefix has been disabled #124

Open xxFREESHROUDxx opened 7 months ago

xxFREESHROUDxx commented 7 months ago

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.

Atinux commented 7 months ago

Could you check in the Nuxt Devtools, in the components tabs the names of your components?

xxFREESHROUDxx commented 7 months ago

Component: image

image

Atinux commented 7 months ago

I am talking about the Nuxt Devtools

xxFREESHROUDxx commented 7 months ago

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: image

This is the nuxt icon being used here: image

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

Atinux commented 7 months ago

Then ArrowIcon should work.

You can see a working playground on https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue

xxFREESHROUDxx commented 7 months ago

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

Atinux commented 7 months ago

Could you try adding the global: true ?