入门

🌐 Getting started

本指南将帮助你在 React Native 项目中开始使用 Lucide。请确保你已经设置好 React Native 环境。如果你还没有环境，可以使用 React Native CLI、Expo 或你选择的任何其他 React Native 模板创建一个新的 React Native 项目。

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

安装

🌐 Installation

首先，确保你已安装 react-native-svg（版本在 12 到 15 之间）。然后，安装该软件包：

🌐 First, ensure that you have react-native-svg (version between 12 and 15) installed. Then, install the package:

pnpm

pnpm add lucide-react-native

yarn

yarn add lucide-react-native

npm

npm install lucide-react-native

bun

bun add lucide-react-native

导入你的第一个图标

🌐 Importing your first icon

Lucide 是用 ES 模块构建的。

🌐 Lucide is built with ES Modules.

每个图标都可以作为 React 组件导入，该组件会渲染一个 react-native-svg 元素。

🌐 Each icon can be imported as a React component, which renders an react-native-svg element.

import { Camera } from 'lucide-react-native';

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