mirror of
https://github.com/lucide-icons/lucide.git
synced 2025-12-16 07:37:42 +01:00
ad1accb2e3
* Fixed import of toKebabCase helper function * Added utils package * utils * Make utils package work in build * Add lucide-shared * Transpile solid with esbuild * Fix resolve modules * Cleanup * Format files * Fix properties plugins function * Fix properties plugins in lucide package * Revert remove resolve plugin and cleanup * Update snapshots * Revert icon changes --------- Co-authored-by: Rohan <rohancrrm@gmail.com>
Lucide React Native
Implementation of the lucide icon library for React Native applications.
What is lucide? Read it here.
Installation
First, ensure that you have react-native-svg (version between 12 and 15) installed. Then, install the package:
yarn add lucide-react-native
or
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;