Lucide React Native ​

Implementation of the lucide icon library for React Native applications

Installation ​

First, ensure that you have react-native-svg@^12.0.0 installed. Then, install the package:

pnpm install lucide-react-native

yarn add lucide-react-native

npm install lucide-react-native

How to use ​

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 ​

Applying props ​

To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component.

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

One generic icon component ​

It is possible to create one generic icon component to load icons.

Icon Component Example ​

import { icons } from 'lucide-react';

const Icon = ({ name, color, size }) => {
  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="home" />;
};

export default App;