icon component be a string from server

[pincman]

If i have an menu config from server,the icon is string not component,how to use it?like this

[antfu]

https://github.com/antfu/unplugin-icons#custom-icons

You can write your down function to request them.

[pincman]

@antfu Sorry, I may not have made it clear, the menu data object like

[{
    icon: 'xxx',
    name: 'dashboard',
},
{
    icon: 'yyy',
    name: 'signin',
},
]

and in jsx,how to import ionify icon?

const icon = menu.icon
<Icon name={icon} />

this component only can load static?

<XXX />

another lib https://github.com/antfu/unocss/tree/main/packages/preset-icons may not be easy to use the solution of this library,
I want to use this library to dynamically load icons, is it possible？

[antfu]

Sorry no if they can't be determined at build time #5

You can consider using Iconify's runtime

[pincman]

I think this is indeed impossible, because the dynamic icon obtained from the server is unpredictable, so it is impossible to have a local icon. Maybe the official api from ionify is the best way
Another question, can local static icons only be used in the way of components?
How can it be loaded on demand like the following? The purpose of this is to encapsulate a unified Icon component to facilitate integration with iconfont, antd/icon and other libraries

<Icon name={icon} {...rest} />

[pincman]

@antfu finally,component like

const Icon: FC<...> = (props) => {
    // it's by unplugin-icons
    if (props.type === IconType.IONIFY) return <Ionify {...omit(props, ['children'])} />;
   // others
    if (props.type === IconType.Antd) return <AntdIcon {...props} />;
    if (props.type === IconType.ICONFONT) return <IconFont {...props} />;
    return <SvgIcon {...(props as SvgPropsType)} />;
};
export default Icon;