mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-12 13:38:32 +00:00
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>
89 lines
2.3 KiB
Markdown
89 lines
2.3 KiB
Markdown
---
|
|
title: Getting started - React Native
|
|
description: This guide will help you get started with Lucide in your React Native project.
|
|
---
|
|
|
|
<script setup>
|
|
import OverviewLink from '../../.vitepress/theme/components/base/OverviewLink.vue'
|
|
import OverviewLinkGrid from '../../.vitepress/theme/components/base/OverviewLinkGrid.vue'
|
|
import { reactNativeSidebar } from '../../.vitepress/sidebar/react-native'
|
|
</script>
|
|
|
|
# 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
|
|
|
|
```sh [pnpm]
|
|
pnpm add lucide-react-native
|
|
```
|
|
|
|
```sh [yarn]
|
|
yarn add lucide-react-native
|
|
```
|
|
|
|
```sh [npm]
|
|
npm install lucide-react-native
|
|
```
|
|
|
|
```sh [bun]
|
|
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.
|
|
|
|
```jsx
|
|
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](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
|
|
|
|
```jsx
|
|
// Usage
|
|
const App = () => {
|
|
return (
|
|
<Camera
|
|
size={48}
|
|
color="red"
|
|
strokeWidth={1}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
More examples and details how to use props, continue the guide:
|
|
|
|
<OverviewLinkGrid>
|
|
<OverviewLink v-for="item in reactNativeSidebar[1].items" :key="item.link" :href="item.link" :title="item.text" :desc="item.desc"/>
|
|
</OverviewLinkGrid>
|