How to list all available custom icons

[Rednas83]

Usually I fetched the different icons with something like.

var icons = import.meta.glob(`.././assets/*.svg`, { as: "raw", eager: true })

for (const item in icons) {
  body.innerHTML = icons[item]
  let name = item.formatx(`../assets/$V.svg`)
  let color = body.querySelector("#color")?.getAttributeNS(null, "fill") || "black"
  let size = undefined // TODO

  result.push(await icon(`${name} c-${color}`, body.querySelector("svg") || undefined))
}

But this returns

Is there a better way?

[antfu]

We might need to add a DevTools tab for it. Or do you mean to get them from at the runtime?

[antfu]

If runtime, you can try https://iconify.design/docs/icon-components/vue/list-icons.html

[Rednas83]

I meant to list the custom svg files from the customCollections

export default defineNuxtConfig({
  modules: [
    '@nuxt/icon'
  ],
  ssr: false,
  icon: {
    provider: 'server', // <-- this
    customCollections: [
      {
        prefix: 'my-icon',
        dir: './assets/my-icons'
      },
    ],
  },
})

Is there a convenient way to do that?