Feature: Possible to change the icons directory

[memic84]

Is it possible to change the /components/global directory. I have checked the code of this module, but it seems to me that it could be something that's inside Nuxt 3?

Proposition:

  nuxtIcon: {
    size: "16px",
    source: '~/components/icons' // or an array with multiple values
  },

[Atinux]

The only requirement is that the component is defined as global, thus the components/global/

You can set a component to be global by using the nuxt.config:

export default defineNuxtConfig({
  components: [
    { path: '~/components/icons', global: true ],
    '~/components',
  }
})

See live demo on https://stackblitz.com/edit/nuxt-icon-playground-gyhf3n?file=nuxt.config.ts

[memic84]

Great, this works!

Just a note from working with config extend.

I had to make an change for my setup with a monorepo and a config extends:

components: [
    { 
        path: './components/icons', global: true 
    }, 
    './components'
]

The ~ notation didn't work, and i had to change to use a dot.

The custom component in the base directory works, but in the root it doesn't work if i don't added the same code for the nuxt.config.ts. When adding duplicate code to base and root the components key, then it works.

I might have the wrong concept here, but i thought that the base and ui config, components got merged (root being highest priority), so that the components configuration in nuxt.config, should already be there.

Example: Reproduction

[Atinux]

Any hint regarding the reproduction @danielroe ?

[danielroe]

Yes, this is correct. But ~ always points to the finally resolved source directory, and ~~ to the finally resolved root directory (that is, not the theme but the project that is extending the theme). So within a theme you plan to extend from, you should use relative imports.

We do plan to support named layer aliases so you could do something like ~base/components but that's next on the list: https://github.com/nuxt/nuxt.js/issues/13367.

[memic84]

@danielroe Thank you for the explanation and the extends feature is great in Nuxt 3!