如何为Svelte（TypeScript）中的图标组件定义类型？

在SvelteKit中，你可以使用Svelte官方提供的ComponentType类型来定义图标的类型，具体实现如下：

1. 导入必要的类型 #

从svelte包中导入ComponentType类型：

import type { ComponentType } from 'svelte';

2. 定义导航菜单的类型 #

通用方案（不限制图标props） #

如果不需要严格校验图标组件的传入属性，直接使用ComponentType即可：

const navigationMenu: { path: string; label: string; icon: ComponentType }[] = [
    {
        path: '/',
        label: 'Home',
        icon: Home
    },
    // 其他导航项
];

严格校验props的方案 #

如果你的图标组件需要接收特定属性（比如代码里用到的size、strokeWidth等），可以先定义props类型，再结合ComponentType使用：

// 定义图标组件的props类型
type IconProps = {
    focusable?: boolean;
    ariaHidden?: boolean;
    size?: number;
    strokeWidth?: number;
};

// 定义导航菜单数组类型
const navigationMenu: { path: string; label: string; icon: ComponentType<IconProps> }[] = [
    {
        path: '/',
        label: 'Home',
        icon: Home
    },
    // 其他导航项
];

说明 #

ComponentType是Svelte提供的专门用来表示Svelte组件的类型，它兼容所有自定义或第三方图标组件（比如Lucide Svelte、Heroicons等）。使用这个类型后，TypeScript会自动校验你传递给<svelte:component>的props是否符合组件要求，避免类型错误。

内容的提问来源于stack exchange，提问作者Yilmaz