我有一个 React 组件中的选项列表，我正在通过这些选项进行映射以制作一些 UI。该组件正在 QwikJS 中使用，它支持 React 组件并使用 Vite。但是，当我在选项列表中添加图标值时，Vite 在构建过程中中断。

import { IconHome, IconMail, IconPencilPlus } from '@tabler/icons'

interface OptionProps {
    id: number
    text: string
    icon: React.ReactElement
    url?: string
    action?: () => void
}

export const Command = qwikify$(() => {
    ...
    const options: OptionProps[] = [
        {
            id: 1,
            text: 'Home',
            icon: <IconHome className='h-5 w-5' stroke={1} />,
            url: '/',
            action: undefined,
        },
        {
            id: 2,
            text: 'Join the waitlist',
            icon: <IconPencilPlus className='h-5 w-5' stroke={1} />,
            url: undefined,
            action: () => {
                setShowWaitlist(true)
            },
        },
     ]
     ...
}

我不知道如何定义图标。Vite 一直给我错误：

[vite] 内部服务器错误：无法读取未定义的属性（读取“IconHome”）

我在 Next（这是 Qwik）中使用了相同的代码。有人能看出我做错了什么吗？ - 当我通过选项进行映射时，我想渲染图标，即：

{options.map((option, i) => (
    <div>
        <div>{option.icon}</div>
        <div>{option.text}</div>
    <div>
))}