Lucide React Native

为 React Native 应用程序实现的 lucide 图标库

安装

首先，确保已安装 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 组件导入。

示例

可以传递额外的 props 来调整图标：

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

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

export default App;

Props

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

应用 props

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

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

与 Lucide lab 或自定义图标一起使用

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

它们可以通过使用 Icon 组件来使用。所有像常规 lucide 图标一样的 props 都可以传递以调整图标外观。

使用 Icon 组件

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

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

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

一个通用的图标组件

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

WARNING

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

图标组件示例

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

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

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

export default Icon;

使用图标组件

import Icon from './Icon';

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

export default App;