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?

[oleg-savenok]

Any update on this?

[Rednas83]

Just tried it and it actually also works for custom collections.
Unfortunate thing is that it only works on server level🤔

server

import { listIcons } from "@iconify/vue"
var icons = listIcons() as `${string}:${string}`[] // Returns [uil:github, icons:unicorn, etc...] on server level and returns [] on client level

nuxt.config.ts

 icon: {
    clientBundle: {
      icons: ["uil:github"],
      scan: true,
      includeCustomCollections: true,
      sizeLimitKb: 256,
    },
    serverBundle: {
      collections: ["uil"],
    },
    customCollections: [
      { prefix: "icons", dir: "./assets/icons" },
    ],
  },

How to get listIcons to work on client level?

Perhaps add support for a native solution and put it in the docs?

[cyberalien]

That function lists icons that are loaded. If it is ran after rendering all pages, which should load icon data, it might work for your use case.

Docs: https://iconify.design/docs/icon-components/vue/list-icons.html

[Rednas83]

You can easily reproduce by
pages/icons.vue

<template>
  <pre>{{ listIcons() }}</pre>
</template>
<script setup lang="ts">
import { listIcons } from "@iconify/vue"
</script>

console

I also created an iconify issue for tracking this issue
iconify/iconify#365

And a reproduction
https://stackblitz.com/edit/nuxt-icon-playground-k5wvp3bq?file=app.vue