入门

🌐 Getting started

本指南将帮助你在 React 项目中入门使用 Lucide。确保你已经设置了 React 环境。如果你还没有，可以使用 Create React App、Vite 或任何你选择的 React 模板创建一个新的 React 项目。

🌐 This guide will help you get started with Lucide in your React project. Make sure you have a React environment set up. If you don't have one yet, you can create a new React project using Create React App, Vite, or any other React boilerplate of your choice.

安装

🌐 Installation

pnpm

pnpm add lucide-react

yarn

yarn add lucide-react

npm

npm install lucide-react

bun

bun add lucide-react

导入你的第一个图标

🌐 Importing your first icon

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.

import { Camera } from 'lucide-react';
// Usage
const App = () => {
  return <Camera />;
};
export default App;

属性

🌐 Props

要自定义图标的外观，你可以使用以下属性：

🌐 To customize the appearance of an icon, you can use the following props:

名称	类型	默认值
size	数字	24
color	字符串	currentColor
strokeWidth	数字	2
absoluteStrokeWidth	布尔值	false

因为图标呈现为 SVG 元素，所有标准的 SVG 属性也可以作为属性应用。请参见 MDN 上的 SVG 表现属性列表。

🌐 Because icons render as SVG elements, all standard SVG attributes can also be applied as props. See the list of SVG Presentation Attributes on MDN.

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

更多示例和如何使用 props 的详细信息，继续指南：

🌐 More examples and details how to use props, continue the guide:

颜色Adjust the color of your icons尺寸Adjust the size of your icons描边宽度Adjust the stroke width of your icons