入门

🌐 Getting started

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

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

安装

🌐 Installation

pnpm

pnpm add lucide-preact

yarn

yarn add lucide-preact

npm

npm install lucide-preact

bun

bun add lucide-preact

导入你的第一个图标

🌐 Importing your first icon

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

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

每个图标都可以作为 Preact 组件导入，该组件会渲染一个内联 SVG 元素。这样，只有导入到项目中的图标会包含在最终的打包文件中，其余的图标会被进行摇树优化。

🌐 Each icon can be imported as a Preact 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-preact';

// 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