Lucide React Native

用于 Lucide 图标的 React Native 组件，可在 iOS 和 Android 平台上无缝工作。基于 react-native-svg 构建，每个图标都渲染为原生 SVG 组件，在移动设备上提供一致的视觉效果和性能。

🌐 React Native components for Lucide icons that work seamlessly across iOS and Android platforms. Built on top of react-native-svg, each icon renders as a native SVG component, providing consistent visual appearance and performance across mobile devices.

你可以完成的事:

• 将图标用作 React Native 组件，并实现平台一致的渲染
• 使用可扩展矢量图标构建跨平台移动应用
• 创建适应不同屏幕密度的响应式界面
• 与 React Native 的样式系统和动画库集成
• 在 iOS 和 Android 上保持一致的图标外观平台

安装

🌐 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

如何使用

🌐 How to use

每个图标都可以作为 React 组件导入。

🌐 Each icon can be imported as a React component.

示例

🌐 Example

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

🌐 Additional props can be passed to adjust the icon:

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

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

export default App;

属性

🌐 Props

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

应用属性

🌐 Applying props

要自定义图标的外观，你可以将自定义属性作为 props 直接传递给组件。该组件接受所有 SVG 属性作为 props，从而允许灵活地为 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.

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

使用 Lucide Lab 或自定义图标

🌐 With Lucide Lab or custom icons

Lucide Lab 是一组不属于 Lucide 主库的图标。

它们可以通过使用 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-native';
import { coconut } from '@lucide/lab';

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

一个通用图标组件

🌐 One generic icon component

可以创建一个通用的图标组件来加载图标，但不建议这样做。

🌐 It is possible to create one generic icon component to load icons, but it is not recommended.

WARNING

下面的示例导入了所有的 ES 模块，因此在使用时请谨慎。导入所有图标将显著增加应用的构建大小，从而对其性能产生负面影响。在使用像 Webpack、Rollup 或 Vite 这样的打包工具时，这一点尤其需要注意。

图标组件示例

🌐 Icon Component Example

import * as icons from 'lucide-react-native/icons';

interface IconProps {
  name: keyof typeof icons;
  color?: string;
  size?: number;
}

const Icon = ({ name, color, size }: IconProps) => {
  const LucideIcon = icons[name];

  return <LucideIcon color={color} size={size} />;
};

export default Icon;

使用图标组件

🌐 Using the Icon Component

import Icon from './Icon';

const App = () => {
  return <Icon name="House" />;
};

export default App;