mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-11 13:28:19 +00:00
1802f33f6c
* feat(lucide-react): add package exports for per-icon imports without changing how Node resolves the package Makes `lucide-react/icons/<name>` and `lucide-react/types` public so a single icon can be imported with a small shared declaration instead of the 2.2 MB `dist/lucide-react.d.ts`, and without loading the CJS barrel on the server. The root entry only lists `module` and `default`, so bundlers keep the ESM barrel and Node keeps resolving to `dist/cjs/lucide-react.js` as it does today through `main`. The map reverted in #2814 sent Node to the ESM barrel, which is what #2743 hit. `./dist/*` keeps existing deep imports working. * Modify getting started guide for icon imports Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * fix(lucide-react): add node, import and require conditions after module and keep the extension-specific and src subpaths exported Resolvers that are called with a custom condition list drop `module` and fell through to `default`, the CJS bundle; esbuild with `conditions: ['workerd', 'worker']` bundled 1.3 MB instead of the 58 KB tree-shaken output it gets on main. The root and `./icons` entries now list `node`, `import` and `require` after `module`, with `node` ahead of `import` so Node keeps resolving to `dist/cjs/lucide-react.js` for both `import` and `require`. `lucide-react/dynamic.mjs`, `lucide-react/dynamic.js` and `lucide-react/dynamicIconImports.mjs` are imported by consumers and threw ERR_PACKAGE_PATH_NOT_EXPORTED; they have explicit entries again. The docs API routes import `lucide-react/src/createLucideIcon` and `lucide-react/src/Icon`, which Nitro left as external imports without a `./src/*` entry, so the entry from the 0.470.0 map is back. * test(lucide-react): resolve the package entry points with Node itself in the React Router fixture The browser suite resolves lucide-react through Vite, so nothing checked the `exports` map the way a server runtime does. `tests/exports.node.test.ts` runs under `node --test` from the fixture's `check` script and asserts where `import.meta.resolve` and `require.resolve` land for the root, `./icons`, a single icon, the dynamic entries with and without an extension, the `dist/*` passthrough and `package.json`, that `./types` is declaration-only, and that the resolved modules load. Vitest is told to leave that file to Node. * docs(lucide-react): note that per-icon imports are ESM only `require()` of `lucide-react/icons/<name>` needs Node.js 20.19 or 22.12; 20.18 throws ERR_REQUIRE_ESM. --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
89 lines
2.7 KiB
Markdown
89 lines
2.7 KiB
Markdown
---
|
|
title: Getting started - React
|
|
description: This guide will help you get started with Lucide in your React project.
|
|
---
|
|
<script setup>
|
|
import OverviewLink from '../../.vitepress/theme/components/base/OverviewLink.vue'
|
|
import OverviewLinkGrid from '../../.vitepress/theme/components/base/OverviewLinkGrid.vue'
|
|
import { reactSidebar } from '../../.vitepress/sidebar/react'
|
|
</script>
|
|
|
|
# Getting started
|
|
|
|
This guide will help you get started with Lucide in your React project.
|
|
Make sure you have a React environment set up. If you don't have one yet, you can create a new React project using Create React App, Vite, or any other React boilerplate of your choice.
|
|
|
|
## Installation
|
|
|
|
::: code-group
|
|
|
|
```sh [pnpm]
|
|
pnpm add lucide-react
|
|
```
|
|
|
|
```sh [yarn]
|
|
yarn add lucide-react
|
|
```
|
|
|
|
```sh [npm]
|
|
npm install lucide-react
|
|
```
|
|
|
|
```sh [bun]
|
|
bun add lucide-react
|
|
```
|
|
|
|
:::
|
|
|
|
## Importing your first icon
|
|
|
|
Lucide is built with ES Modules, so it's completely tree-shakable.
|
|
|
|
Each icon can be imported as a React component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
|
|
|
|
```jsx
|
|
import { Camera } from 'lucide-react';
|
|
// Usage
|
|
const App = () => {
|
|
return <Camera />;
|
|
};
|
|
export default App;
|
|
```
|
|
|
|
### Importing a single icon
|
|
|
|
You can also import one icon at a time. This skips the icon barrel, which matters when modules are resolved at runtime (server-side rendering, for example), and only loads a small type declaration instead of the full one.
|
|
|
|
```tsx
|
|
import Camera from 'lucide-react/icons/camera';
|
|
import type { LucideProps } from 'lucide-react/types';
|
|
```
|
|
|
|
These per-icon entry points are ES modules only. `require()` of one works on Node.js 20.19 and 22.12 or newer; on older versions, import the icon from the package root instead.
|
|
|
|
## 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 reactSidebar[1].items" :key="item.link" :href="item.link" :title="item.text" :desc="item.desc"/>
|
|
</OverviewLinkGrid>
|