Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
lucide-react
Advanced tools
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.
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>
);
}
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.
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.
Implementation of the lucide icon library for react applications.
What is lucide? Read it here.
yarn add lucide-react
or
npm install lucide-react
It's built with ES modules so it's completely tree-shakable. Each icon can be imported as a react component.
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;
name | type | default |
---|---|---|
size | Number | 24 |
color | String | currentColor |
strokeWidth | Number | 2 |
You can also pass custom props that will be added in the svg as attributes.
const App = () => {
return <Camera fill="red" />;
};
It is possible to create a generic icon component to load icons.
:warning: 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 { icons } from 'lucide-react';
const Icon = ({ name, color, size }) => {
const LucideIcon = icons[name];
return <LucideIcon color={color} size={size} />;
};
export default Icon;
Lucide react exports a dynamic import map dynamicIconImports
. Useful for applications that want to show icons dynamically by icon name. For example when using a content management system with where icon names are stored in a database.
When using client side rendering, it will fetch the icon component when it's needed. This will reduce the initial bundle size.
The keys of the dynamic import map are the lucide original icon names.
Example with React suspense:
import React, { lazy, Suspense } from 'react';
import { dynamicIconImports, LucideProps } from 'lucide-react';
const fallback = <div style={{ background: '#ddd', width: 24, height: 24 }}/>
interface IconProps extends Omit<LucideProps, 'ref'> {
name: keyof typeof dynamicIconImports;
}
const Icon = ({ name, ...props }: IconProps) => {
const LucideIcon = lazy(dynamicIconImports[name]);
return (
<Suspense fallback={fallback}>
<LucideIcon {...props} />
</Suspense>
);
}
export default Icon
In NextJS, the dynamic function can be used to dynamically load the icon component.
To make dynamic imports work with NextJS, you need to add lucide-react
to the transpilePackages
option in your next.config.js
like this:
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages: ['lucide-react'] // add this
}
module.exports = nextConfig
You can then start using it:
import dynamic from 'next/dynamic'
import { LucideProps } from 'lucide-react';
import dynamicIconImports from 'lucide-react/dynamicIconImports';
interface IconProps extends LucideProps {
name: keyof typeof dynamicIconImports;
}
const Icon = ({ name, ...props }: IconProps) => {
const LucideIcon = dynamic(dynamicIconImports[name])
return <LucideIcon {...props} />;
};
export default Icon;
FAQs
A Lucide icon library package for React applications
The npm package lucide-react receives a total of 1,370,328 weekly downloads. As such, lucide-react popularity was classified as popular.
We found that lucide-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.