Lucide React Update
Improves Typescript types
Improves Typescript types export by switching to [rollup-plugin-dts](https://github.com/Swatinem/rollup-plugin-dts) for types generation.
Closes 1420 and 1373
Added JS Docs
When hovering (in an IDE that supports it) over a Lucide component you get a JSDoc comment with useful information about the Lucide Icons component. It also shows a small preview of the icons you imported with the link to the lucide website.
<img width="635" alt="image" src="https://github.com/lucide-icons/lucide/assets/11825403/20b62886-4552-4f09-905b-a8a1a5fab066">
Dynamic Imports Map (experimental)
Addition to 1373 (closed).
Lucide react now exposes 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.
More info in [docs](https://lucide.dev/guide/packages/lucide-react#with-dynamic-imports)
Example component with NextJS:
tsx
import dynamic from 'next/dynamic'
import { dynamicIconImports, LucideProps } from 'lucide-react';
interface IconProps extends LucideProps {
name: keyof typeof dynamicIconImports;
}
const Icon = ({ name, color, size }: IconProps) => {
const LucideIcon = dynamic(dynamicIconImports[name])
return <LucideIcon color={color} size={size} />;
};
export default Icon;
Using the Icon Component
These features will be added later to other packages.
tsx
import Icon from './Icon';
const App = () => {
return <Icon name="home" />;
};
export default App;
New icons 🎨
- `gauge-circle` (1256) by danielbayley
Modified Icons 🔨
- `minus-circle` (1381) by danielbayley
- `minus-square` (1381) by danielbayley
- `minus` (1381) by danielbayley
- `plus-circle` (1381) by danielbayley
- `plus-square` (1381) by danielbayley
- `plus` (1381) by danielbayley
- `square` (1381) by danielbayley