Lucide React

为 React 应用实现 lucide 图标库

¥Implementation of the lucide icon library for react applications

安装

¥Installation

pnpm

pnpm install lucide-react

yarn

yarn add lucide-react

npm

npm install lucide-react

bun

bun add lucide-react

如何使用

¥How to use

Lucide 基于 ES 模块构建，因此完全支持 tree-shaking。

¥Lucide is built with ES Modules, so it's completely tree-shakable.

每个图标都可以作为 React 组件导入，该组件会渲染一个内联 SVG 元素。这样，只有导入到项目中的图标才会包含在最终的软件包中。其余图标已通过 tree-shaking 移除。

¥Each icon can be imported as a React component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.

示例

¥Example

可以传递其他属性来调整图标：

¥Additional props can be passed to adjust the icon:

import { Camera } from 'lucide-react';

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

export default App;

属性

¥Props

name	type	default
size	number	24
color	string	currentColor
strokeWidth	number	2
absoluteStrokeWidth	布尔值	false

应用属性

¥Applying props

要自定义图标的外观，你可以将自定义属性作为 props 直接传递给组件。该组件接受所有 SVG 属性作为属性，从而允许灵活地设置 SVG 元素的样式。请参阅 MDN 上的 SVG 展示属性列表。

¥To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on MDN.

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

使用 Lucide Lab 或自定义图标

¥With Lucide lab or custom icons

Lucide Lab 是一个图标集合，不属于 Lucide 主库。

¥Lucide lab is a collection of icons that are not part of the Lucide main library.

它们可以通过 Icon 组件使用。所有与常规 Lucide 图标类似的属性都可以通过传递来调整图标外观。

¥They can be used by using the Icon component. All props like regular lucide icons can be passed to adjust the icon appearance.

使用 Icon 组件

¥Using the Icon component

这将根据传递的 iconNode 创建一个图标，并渲染一个 Lucide 图标组件。

¥This creates a single icon based on the iconNode passed and renders a Lucide icon component.

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

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

动态图标组件

¥Dynamic Icon Component

可以创建一个通用的图标组件来加载图标。但不建议这样做，因为它会在构建过程中导入所有图标。这会增加构建时间并增加创建的不同模块的数量。

¥It is possible to create one generic icon component to load icons. But it is not recommended, since it is importing all icons during the build. This increases build time and the different modules it will create.

DynamicIcon 对于希望通过图标名称动态显示图标的应用非常有用。例如，在使用将图标名称存储在数据库中的内容管理系统时。

¥DynamicIcon is useful for applications that want to show icons dynamically by icon name. For example, when using a content management system with where icon names are stored in a database.

对于静态用例，建议直接导入图标。

¥For static use cases, it is recommended to import the icons directly.

可以传递相同的属性来调整图标外观。需要 name 属性才能加载正确的图标。

¥The same props can be passed to adjust the icon appearance. The name prop is required to load the correct icon.

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

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