TypeScript 支持

🌐 TypeScript Support

@lucide/svelte 包导出的类型列表。 在 TypeScript Svelte 项目中使用 Lucide 图标时，这些可以用来给你的组件定义类型。

🌐 List of exported types from the @lucide/svelte package. These can be used to type your components when using Lucide icons in a TypeScript Svelte project.

LucideProps

导出可以传递给图标组件的所有属性以及任何其他 SVG 属性，参见：MDN 上的 SVG 表现属性。

🌐 Exports all props that can be passed to an icon component and any other SVG attributes, see: SVG Presentation Attributes on MDN.

interface LucideProps extends SVGAttributes<SVGSVGElement> {
  name?: string;
  color?: string;
  size?: number | string;
  strokeWidth?: number | string;
  absoluteStrokeWidth?: boolean;
  children?: Snippet;
  [key: string]: any; // Any other SVG attributes
}

使用 LucideProps

🌐 Using LucideProps

你可以使用 LucideProps 接口为你的自定义图标组件输入 props。

🌐 You can use the LucideProps interface to type props for your custom icon components.

IconWrapper.svelte

<script lang="ts">
import { Camera, type LucideProps } from '@lucide/svelte';

let props: LucideProps = $props();
</script>

<template>
  <div>
    <Camera {...props} />
  </div>
</template>

LucideIcon

单个图标组件的类型，当你想为一个保存图标组件的变量或属性定义类型时，这非常有用。

🌐 Type for individual icon components, this is use full when you want to type a variable or prop that holds an icon component.

import type { Component } from 'svelte';

type LucideIcon = Component<LucideProps>

使用 LucideIcon

🌐 Using LucideIcon

当你需要直接使用图标组件时，可以使用 LucideIcon 类型。

🌐 You can use the LucideIcon type when you need to work with icon components directly.

Svelte 5

<script lang="ts">
  import { Home, Library, Cog, type LucideIcon } from '@lucide/svelte';

  type MenuItem = {
    name: string;
    href: string;
    icon: LucideIcon;
  };

  const menuItems: MenuItem[] = [
    {
      name: 'Home',
      href: '/',
      icon: Home
    },
    {
      name: 'Blog',
      href: '/blog',
      icon: Library
    },
    {
      name: 'Projects',
      href: '/projects',
      icon: Cog
    }
  ];
</script>

{#each menuItems as item}
  {@const Icon = item.icon}
  <a href={item.href}>
    <Icon />
    <span>{item.name}</span>
  </a>
{/each}

Svelte 4

<script lang="ts">
  import { Home, Library, Cog, type Icon } from 'lucide-svelte';
  import type { ComponentType } from 'svelte';

  type MenuItem = {
    name: string;
    href: string;
    icon: ComponentType<Icon>;
  };

  const menuItems: MenuItem[] = [
    {
      name: 'Home',
      href: '/',
      icon: Home
    },
    {
      name: 'Blog',
      href: '/blog',
      icon: Library
    },
    {
      name: 'Projects',
      href: '/projects',
      icon: Cog
    }
  ];
</script>

{#each menuItems as item}
  {@const Icon = item.icon}
  <a href={item.href}>
    <Icon />
    <span>{item.name}</span>
  </a>
{/each}

IconNode

用于图标原始 SVG 结构的类型。这是一个包含 SVG 元素及其属性的数组，用于渲染图标。通常不直接在应用代码中使用，但对于高级用例可能很有用，例如使用自定义图标或与 Lucide Lab 一起使用。

🌐 Type for the raw SVG structure of an icon. This is an array of SVG elements and their attributes to render the icon. Not commonly used directly in application code. But can be useful for advanced use cases, such as using custom icons or with Lucide Lab.

type IconNode = [
  elementName: 'circle' | 'ellipse'| 'g' | 'line' | 'path' | 'polygon' | 'polyline' | 'rect',
  attrs: SVGAttributes<SVGSVGElement>
][];

使用 IconNode

🌐 Using IconNode

当你需要处理图标的原始 SVG 结构时，你可以使用 IconNode 类型。

🌐 You can use the IconNode type when you need to work with the raw SVG structure of an icon.

CustomIcon.svelte

<script lang="ts">
import { type IconNode, Icon } from '@lucide/svelte';

const customIcon: IconNode = [
  ['circle', { cx: 12, cy: 12, r: 10 }],
  ['line', { x1: 12, y1: 8, x2: 12, y2: 12 }],
  ['line', { x1: 12, y1: 16, x2: 12, y2: 16 }],
];
</script>

<Icon iconNode={customIcon} size="24" color="blue" />