怎么按照字符串加载图标，另外这种方法生成菜单推荐吗？

[InfernalAzazel]

'use client';
import React from "react";
import {Breadcrumb, Layout, Nav} from '@douyinfe/semi-ui';
import {IconSemiLogo} from '@douyinfe/semi-icons';
import {IconBadge, IconBreadcrumb, IconSteps, IconTreeSelect} from '@douyinfe/semi-icons-lab'
import {LeftNav} from "@/app/components/layout/LeftNav";
import {TopHeader} from "@/app/components/layout/TopHeader";
import {UserAvatar} from "@/app/components/layout/UserAvatar";
import {FooterContent} from "@/app/components/layout/FooterContent";
import classNames from "classnames";
import {router} from "next/client";
import Link from "next/link";
import * as SemiIcons from '@douyinfe/semi-icons-lab'


export default function RootLayout({children}: {
    children: React.ReactNode;
}) {
    const {Header, Footer, Sider, Content} = Layout;
    const clsLayout = classNames(
       'border-[1px]',
        'border-solid',
        'h-[100vh]',
        'border-[var(--semi-color-border)]',
    )
    const clsHeader = classNames(
        'bg-[var(--semi-color-bg-1)]',
    )
    const menuItems = [
        {
            itemKey: 'approve-management',
            text: '审批管理',
            icon: <IconBreadcrumb/>,
            items: [
                '入驻审核',
                {
                    itemKey: 'operation-management',
                    text: '运营管理',
                    items: ['人员管理', '人员变更'],
                },
            ],
        },
        {
            text: '任务平台',
            icon: <IconSteps/>,
            itemKey: 'job',
            items: ['任务管理', '用户任务查询'],
        },
        {itemKey: 'user', text: '用户管理', icon: <IconBadge/>},
        {itemKey: 'union', text: '活动管理', icon: <IconTreeSelect/>},
    ];
    const dropdownItems = [
        {key: 'details', text: '详情'},
        {key: 'logout', text: '退出'},
    ];

    // 统一配置导航项和路由映射
    const navItems = [
        { itemKey: 'dashboard', text: '仪表盘', icon: 'IconTreeSelec', route: '/dashboard' },
        {
            text: '系统管理',
            itemKey: 'system',
            items: [
                { itemKey: 'menu', text: '菜单', route: '/system/menu' },
                { itemKey: 'role', text: '角色', route: '/system/role' },
            ],
        },
    ];
    // 动态图标组件
    const Icon = ({ iconName, size = 'default', color, style = {} }: {
        iconName: string;
        size?: 'extra-small' | 'small' | 'default' | 'large' | 'extra-large';
        color?: string;
        style?: React.CSSProperties;
    }) => {
        const IconComponent = SemiIcons[iconName]; // 根据图标名称解析对应的图标组件

        if (!IconComponent) {
            console.error(`未找到图标: ${iconName}`); // 如果图标不存在，打印错误日志
            return <span style={{ color: 'red' }}>图标未找到: {iconName}</span>;
        }

        return (
            <IconComponent
                size={size}
                style={{ color, ...style }} // 支持通过 `color` 和 `style` 自定义样式
            />
        );
    };

    // Helper: 渲染 Semi Design `items` 格式
    const generateNavItems = (items) =>
        items.map((item) => {
            // 如果是子菜单，递归处理
            if (item.items) {
                return {
                    ...item,
                    items: generateNavItems(item.items),
                };
            }
            // 返回普通导航项
            return {
                ...item,
                itemKey: item.itemKey,
                text: item.text,
                icon: item.icon ? <Icon icon={item.icon} /> : null,
            };
        });

    const currentPath = router?.pathname || '/';
    return (
        <Layout className={clsLayout}>
            <Header className={clsHeader}>
                <TopHeader logo={<IconSemiLogo style={{height: '36px', fontSize: 36}}/>}
                           title={'Admin'}
                           footer={
                               <UserAvatar
                                   userName="Bytedancer"
                                   userAvatar="BD"
                                   dropdownItems={dropdownItems}
                               />
                           }/>
            </Header>
            <Layout>
                <Sider style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
                    <Nav
                        selectedKeys={[
                            navItems.find((item) =>
                                currentPath === item.route ||
                                (item.items &&
                                    item.items.some((subItem) => subItem.route === currentPath))
                                    ? item.itemKey
                                    : null
                            )?.itemKey,
                        ]}
                        renderWrapper={({ itemElement, props }) => {
                            // 查找当前导航项的路由
                            const route = navItems
                                .flatMap((item) =>
                                    item.items ? [item, ...item.items] : [item]
                                )
                                .find((i) => i.itemKey === props.itemKey)?.route;

                            return (
                                <Link href={route || '#'} passHref>
                                    {itemElement}
                                </Link>
                            );
                        }}
                        items={generateNavItems(navItems)}
                    />
                </Sider>
                <Content
                    style={{
                        padding: '24px',
                        backgroundColor: 'var(--semi-color-bg-0)',
                    }}
                >
                    <Breadcrumb
                        style={{
                            marginBottom: '24px',
                        }}
                        routes={['首页', '当这个页面标题很长时需要省略', '上一页', '详情页']}
                    />
                    <div
                        style={{
                            borderRadius: '10px',
                            border: '1px solid var(--semi-color-border)',
                            height: '376px',
                            padding: '32px',
                        }}
                    >
                        {children}
                    </div>

                </Content>

            </Layout>
            <Footer
                style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    padding: '20px',
                    color: 'var(--semi-color-text-2)',
                    backgroundColor: 'rgba(var(--semi-grey-0), 1)',
                }}
            >
                <FooterContent/>
            </Footer>
        </Layout>
    );
}

[pointhalo]

是不是名称没传对？

[InfernalAzazel]

就是名称没有传对，感谢 pointhalo！