TypeScript 支持

🌐 TypeScript Support

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

🌐 List of exported types from the @lucide/vue package. These can be used to type your components when using Lucide icons in a TypeScript Vue 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 {
  size?: number | string;
  color?: string;
  strokeWidth?: number;
  absoluteStrokeWidth?: boolean;
  [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.vue

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

defineProps<LucideProps>();
</script>

<template>
  <div>
    <Camera v-bind="$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.

type LucideIcon = React.FC<LucideProps>;

使用 LucideIcon

🌐 Using LucideIcon

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

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

IconButton.vue

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

defineProps<{
  icon: LucideIcon;
  label: string;
}>();
</script>

<template>
  <button :aria-label="label">
    <component :is="icon" :size="16" />
  </button>
</template>

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: string, attrs: Record<string, string | number>][];

使用 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.vue

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

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>

<template>
  <Icon :iconNode="customIcon" size="24" color="blue" />
</template>