如何将组件的类型定义为 svelte、typescript 中的图标？

Question

我正在尝试在 SvelteKit 中构建一个导航菜单。

const navigationMenu: { path: string; label: string; icon:??? }[] = [
        {
            path: '/',
            label: 'Home',
            icon: Home
        },

我想在每个导航项中渲染图标，如下所示：

 <ul>
            {#each navigationMenu as item}
                <li class:active={item.path === $page.url.pathname}>
                    <a href={item.path}>
                        <svelte:component
                            this={item.icon}
                            focusable="false"
                            aria-hidden="true"
                            size={26}
                            strokeWidth={2}
                        />
                        {item.label}
                    </a>
                </li>
            {/each}
        </ul>

我不知道要传递什么类型的打字稿类型

icon

const navigationMenu: { path: string; label: string; icon:??? }[] = []

Answer 1

这个问题的答案随着时间的推移而改变。

在 2023 年，要正确键入自定义组件，您可以使用 组件类型。

import type { ComponentType } from 'svelte';
...
const navigationMenu: { path: string; label: string; icon: ComponentType }[] = [
        {
            path: '/',
            label: 'Home',
            icon: Home
        },
        ...
]
...