TypeScript 支持

🌐 TypeScript Support

lucide-react 包导出的类型列表。这些可以在 TypeScript React 项目中使用 Lucide 图标时用于为你的组件定义类型

🌐 List of exported types from the lucide-react package. These can be used to type your components when using Lucide icons in a TypeScript React 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 接口来输入自定义图标组件，或者在需要处理图标属性时使用。

🌐 You can use the LucideProps interface to type your custom icon components or when you need to work with icon props.

import { type LucideProps } from 'lucide-react';
import { Camera } from 'lucide-react';

const WrapIcon = (props: LucideProps) => {
  return <Camera {...props} />;
};

export default WrapIcon;

LucideIcon

用于单个图标组件的类型。

🌐 Type for individual icon components.

type LucideIcon = React.FC<LucideProps>;

使用 LucideIcon

🌐 Using LucideIcon

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

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

import { type LucideIcon } from 'lucide-react';

interface ButtonProps {
  icon: LucideIcon;
  label: string;
}

const IconButton = ({ icon: Icon, label }: ButtonProps) => {
  return (
    <button aria-label={label}>
      <Icon size={16} />
    </button>
  );
};

export default IconButton;

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.

import { type IconNode, Icon } from 'lucide-react';

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 }],
];

const MyCustomIcon = () => {
  return (
    <Icon iconNode={customIcon} size={24} color="blue" />
  );
};

export default MyCustomIcon;