Icon

The Icon component renders an icon from Lucide React. Icons are lazy-loaded to prevent increasing bundle size.

Preview

Usage

import { Icon } from 'components/lib';

function MyComponent({ ...props }){
  return (
    <div>
      <Icon name='alert-circle' size={ 16 } color='red' />
      <Icon name='check' size={ 24 } color='#10b981' />
    </div>
  );
}

Props

Prop	Description	Required	Value
className	custom styles	optional	SCSS or Tailwind
color	icon outline color	optional	string (light/dark/green/blue/orange/red) default: dark
name	icon name	required	string (see Lucide Icons)
size	icon size	required	integer, default: 16

Notes

• The Icon component uses lazy, Suspense, and useMemo from React to handle lazy loading of icons.

• The name prop specifies the icon image to use and converts it to PascalCase if necessary.

• The color and fill props allow for customizing the outline and fill colors of the icon.

• Icons are loaded from the lucide-react library.