Why can't icons be parsed dynamically?

[xiegoudan]

Example
in vue3 render function
I want to render different icons in real time through strings

const test: object[] = [
    {
        key: 'xcionsComponentName'
    },
    {
        key: 'xcionsComponentName2'
    }
]

I want to use key or other variable names to control the display xicons svg

[ppxb]

you can import all the icons from dependency like @vicons/carbon or others.

import * as icons from '@vicons/carbon'

then create a function to resolve the icon's name type string to import the icon dynamically.

export const renderIcon = (name: string) => {
  const icon = Object.entries(icons).filter(i => i[0] === name)
  if (icon.length > 0) {
    return () => h(NIcon, null, { default: () => h(icon[0][1]) })
  }
}

if you have multi icon packages just create a object to contact them.

[lupetto3012]

@ppxb
I was looking for this for so long. Now I'm finally able to load my navigation and subnavigation structure from the database including their icons as strings...