Lucide React Native

Lucide 图标的 React Native 组件，能够在 iOS 和 Android 平台无缝工作。

基于 react-native-svg 构建，每个图标以本机 SVG 组件渲染，确保在所有移动设备上视觉效果和性能一致。

您可以做到的

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

安装

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

pnpm

pnpm install lucide-react-native

yarn

yarn add lucide-react-native

npm

npm install lucide-react-native

bun

bun add lucide-react-native

如何使用

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

示例

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

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

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

export default App;

属性

name	type	default
size	number	24
color	string	currentColor
strokeWidth	number	2
absoluteStrokeWidth	boolean	false

应用属性

要自定义图标的外观，您可以直接将自定义属性作为 props 传递给组件。该组件接受所有 SVG 属性作为 props，从而实现对 SVG 元素的灵活样式定制。

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

与 Lucide lab 或自定义图标

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

它们可以通过 Icon 组件使用。与常规 Lucide 图标一样，所有属性都可以传递来调整图标外观。

使用 Icon 组件

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

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

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

一个通用图标组件

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

WARNING

下面的示例会导入所有 ES 模块，请在使用时谨慎。导入所有图标会显著增加应用程序的构建体积，从而降低性能。使用诸如 Webpack、Rollup 或 Vite 等打包工具时更需注意此点。

Icon 组件示例

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

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

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

export default Icon;

使用 Icon 组件

import Icon from './Icon';

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

export default App;