mirror of
https://github.com/lucide-icons/lucide.git
synced 2025-12-28 23:18:21 +01:00
cdd57e6610
* init solid package * add testing * Fix tests solid * add workflow * update types build * Fix typings file * switch to camelCase props * revert camelcased props * Fix tests * Fixing dynamic reactive props in lucide icons * release beta * strokeWidth fix * bump beta version * improve docs * update beta release * update vitest config * Add automatic release for solid package
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@^12.0.0 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;