What is lucide-react?
The lucide-react npm package is a collection of open-source icons for React applications. It provides a wide range of customizable SVG icons that can be easily integrated into React projects.
What are lucide-react's main functionalities?
Basic Icon Usage
This feature allows you to import and use a specific icon from the lucide-react package in your React application. The 'name' prop specifies which icon to render.
import { LucideIcon } from 'lucide-react';
function App() {
return (
<div>
<LucideIcon name="home" />
</div>
);
}
Customizing Icon Size
You can customize the size of the icons by passing the 'size' prop. This example sets the icon size to 48 pixels.
import { LucideIcon } from 'lucide-react';
function App() {
return (
<div>
<LucideIcon name="home" size={48} />
</div>
);
}
Customizing Icon Color
This feature allows you to change the color of the icons by passing the 'color' prop. In this example, the icon color is set to red.
import { LucideIcon } from 'lucide-react';
function App() {
return (
<div>
<LucideIcon name="home" color="red" />
</div>
);
}
Other packages similar to lucide-react
react-icons
The react-icons package provides a comprehensive set of icons from various icon libraries such as Font Awesome, Material Design, and more. It offers a similar level of customization and ease of use as lucide-react, but with a broader selection of icon sets.
fontawesome-svg-core
The @fortawesome/fontawesome-svg-core package is part of the Font Awesome icon library. It provides a wide range of icons and allows for extensive customization, including animation and layering. It is a robust alternative to lucide-react with a large community and extensive documentation.
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
Documentation
For full documentation, visit lucide.dev
Join the Discord server to chat with the maintainers and other users.
License
Lucide is licensed under the ISC license. See LICENSE.
![DigitalOcean Referral Badge](https://lucide.dev/digitalocean.svg)
Awesome backer 🍺
![Scipress sponsor badge](https://lucide.dev/sponsors/scipress.svg)