Package Exports

lucide-react-native
lucide-react-native/dist/cjs/lucide-react-native.js
lucide-react-native/dist/esm/lucide-react-native.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (lucide-react-native) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Lucide React Native

Implementation of the lucide icon library for React Native applications.

What is lucide? Read it here.

Installation

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

yarn add lucide-react-native

npm install lucide-react-native

How to use

It's built with ES modules so it's completely tree-shakable. Each icon can be imported as a react component.

Example

You can pass additional props to adjust the icon.

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

Custom props

You can also pass custom props that will be added in the svg as attributes.

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

Generic icon component

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

⚠️ The example below is importing all ES modules. This is not recommended when you using a bundler since your application build size will grow substantially.

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

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

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

export default Icon;