# Icon

The `Icon` component renders an icon from [Lucide React](https://lucide.dev/guide/packages/lucide-react). Icons are lazy-loaded to prevent increasing bundle size.

### Preview

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2F3nzzCb6VbUQOUf9WTA7E%2Ficon.png?alt=media&#x26;token=2bef7234-90a3-42a8-80e2-c7774b2781af" alt="Gravity icon component"><figcaption></figcaption></figure></div>

### Usage

```javascript
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](https://lucide.dev/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.