lucide-icons/lucide v0.260.0

Lucide React Update and Icons

on GitHub

Lucide React Update

Improves Typescript types

Improves Typescript types export by switching to 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.

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

Example component with NextJS:

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.

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