Lucide React

React 组件，用于 Lucide 图标，可无缝集成至您的 React 应用。每个图标都是完全类型化的 React 组件，在渲染时以优化的内联 SVG 输出，兼具组件的灵活性和矢量图形的性能。

您可以实现的功能：

• 以内完整 TypeScript 支持，将图标作为 React 组件导入
• 通过 props 自定义图标的大小、颜色、描边宽度以及其他 SVG 属性
• 与任何其他 React 组件一样，在 JSX 中轻松使用图标
• 自动树摇，只包含实际使用的图标
• 创建响应状态和用户交互的动态图标组件

安装

pnpm

pnpm install lucide-react

yarn

yarn add lucide-react

npm

npm install lucide-react

bun

bun add lucide-react

如何使用

Lucide 使用 ES 模块构建，完全可树摇。

每个图标可以被导入为 React 组件，渲染为内联 SVG 元素。这样，只有被导入到项目中的图标会出现在最终的包中，其他图标将被树摇去除。

示例

可以通过额外的 props 调整图标：

import { Camera } from 'lucide-react';

// 使用
const App = () => {
  return <Camera color="red" size={48} />;
};

export default App;

属性

name	type	default
size	number	24
color	string	currentColor
strokeWidth	number	2
absoluteStrokeWidth	boolean	false

应用属性

要自定义图标的外观，可以将自定义属性直接作为 props 传递给组件。组件接受所有 SVG 属性作为 props，允许灵活地对 SVG 元素进行样式化。请参阅 MDN 上的 SVG Presentation Attributes。

// 使用
const App = () => {
  return <Camera size={48} fill="red" />;
};

使用 Lucide lab 或自定义图标

Lucide lab 是一组不属于 Lucide 主库的图标。

它们可以通过 Icon 组件使用。与普通 Lucide 图标一样，所有属性都可以用来调整图标外观。

使用 Icon 组件

这会基于传入的 iconNode 创建单个图标并渲染 Lucide 图标组件。

import { Icon } from 'lucide-react';
import { coconut } from '@lucide/lab';

const App = () => (
  <Icon iconNode={coconut} />
);

动态图标组件

可以创建一个通用图标组件来加载图标，但不推荐这样做，因为这会在构建期间导入所有图标，从而增加构建时间和产生更多模块。

DynamicIcon 对于想按图标名称动态显示图标的应用程序很有用，例如在使用内容管理系统时图标名称保存在数据库中。

对于静态使用场景，建议直接导入图标。

与 static 情况相同，您可以传递相同的 props 来调整图标外观。name prop 是必需的，用于加载正确的图标。

import { DynamicIcon } from 'lucide-react/dynamic';

const App = () => (
  <DynamicIcon name="camera" color="red" size={48} />
);