KarsaandEric Fennis
99d25bdee2
* feat(packages): extract build logic to @lucide/shared, still wip * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * feat(packages): extract build logic to @lucide/shared, still wip * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * chore(icons): revert git hook changes made to icons * fix(packages/astro,react-native,vue): fix iconNode type fix(packages/vue): fix hasA11yProp * fix(packages/solid): make component reactive & add unit tests for checking prop changes * test(packages/vue): add reactivity tests to @lucide/vue * fix(packages): replace cpy-cli, accidentally removed during main merge * docs(packages): upgrade react documentation with nonScalingStroke * fix(tests): update snapshots for lucide-react * feat(docs): upgraded package guides with nonScalingStroke, dropping absoluteStrokeWidth * fix(vue,react-native): fix linting issues * fix(icons): add proper fallback for icon width in calculatedStrokeWidth * fix(packages/svelte): add globalProps.class to icons * fix(packages/shared): wrap width, height & size in isDefined * Update types.ts * fix(packages/svelte): do not pass propsClass to mergeClasses --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2.3 KiB
title, description
| title | description |
|---|---|
| Getting started - React Native | This guide will help you get started with Lucide in your React Native project. |
Getting started
This guide will help you get started with Lucide in your React Native project. Make sure you have a React Native environment set up. If you don't have one yet, you can create a new React Native project using React Native CLI, Expo, or any other React Native boilerplate of your choice.
Installation
First, ensure that you have react-native-svg (version between 12 and 15) installed. Then, install the package:
::: code-group
pnpm add lucide-react-native
yarn add lucide-react-native
npm install lucide-react-native
bun add lucide-react-native
:::
Importing your first icon
Lucide is built with ES Modules.
Each icon can be imported as a React component, which renders an react-native-svg element.
import { Camera } from 'lucide-react-native';
// Usage
const App = () => {
return <Camera />;
};
export default App;
Props
To customize the appearance of an icon, you can use the following props:
| name | type | default |
|---|---|---|
size |
number | 24 |
color |
string | currentColor |
strokeWidth |
number | 2 |
nonScalingStroke |
boolean | false |
Because icons render as SVG elements, all standard SVG attributes can also be applied as props. See the list of SVG Presentation Attributes on MDN.
// Usage
const App = () => {
return (
<Camera
size={48}
color="red"
strokeWidth={1}
/>
);
};
More examples and details how to use props, continue the guide: