mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-13 13:48:26 +00:00
Louis Bailleau
55ae908018
* Update `svgo` and `svgson` version and fix some tests * Update eslint-related packages and fix all linter errors * Update all rollup-related packages version * Update all rollup-related packages (part 2) * Update the rest of package which need to be updated * Fix unwanted comment * Fix unwanted comment (again)
Lucide React
Implementation of the lucide icon library for react applications.
What is lucide? Read it here.
Installation
yarn add lucide-react
or
npm install lucide-react
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';
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';
const Icon = ({ name, color, size }) => {
const LucideIcon = icons[name];
return <LucideIcon color={color} size={size} />;
};
export default Icon;