Lucide React

React 应用程序的 lucide 图标库实现

安装

pnpm

pnpm install lucide-react

yarn

yarn add lucide-react

npm

npm install lucide-react

bun

bun add lucide-react

如何使用

Lucide 使用 ES Modules 构建，因此完全支持 tree-shaking。

每个图标都可以作为 React 组件导入，它会渲染一个内联 SVG 元素。这样，只有导入到项目中的图标才会包含在最终的捆绑包中。其余图标会被 tree-shaken 掉。

示例

可以传递额外的 props 来调整图标：

import { Camera } from 'lucide-react';

// 使用
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	boolean	false

应用 props

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

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

与 Lucide lab 或自定义图标一起使用

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

它们可以通过使用 Icon 组件来使用。所有像常规 lucide 图标一样的 props 都可以传递来调整图标外观。

使用 Icon 组件

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

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

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

动态图标组件

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

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

对于静态用例，推荐直接导入图标。

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

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

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