Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Why can't icons be parsed dynamically? #630

Open
xiegoudan opened this issue Oct 25, 2022 · 2 comments
Open

Why can't icons be parsed dynamically? #630

xiegoudan opened this issue Oct 25, 2022 · 2 comments

Comments

@xiegoudan
Copy link

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
Copy link

ppxb commented Nov 17, 2023

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
Copy link

@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...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants