# @agentable/icons-react

Lightweight, high-performance React icon library providing a massive collection
of carefully designed SVG icons with Tree-Shaking support by default.

---

## Features

- 🚀 **Plug and Play**: Each icon is an independent React component
- 📦 **Tree-Shakable**: Only bundle the icons you actually import
- 🎨 **Fully Customizable**: Control size, color, and stroke through props
- 🔧 **TypeScript**: Complete type definitions out of the box

---

## Installation

::: code-group

```sh [pnpm]
pnpm add @agentable/icons-react
```

```sh [yarn]
yarn add @agentable/icons-react
```

```sh [npm]
npm install @agentable/icons-react
```

:::

---

## Quick Start

### 1. Named Import (Recommended)

```jsx
import { Home, User } from '@agentable/icons-react';

const App = () => (
  <div>
    <Home />
    <User color='tomato' size={32} />
  </div>
);
```

### 2. Direct Path Import (Fastest Build)

```jsx
import Home from '@agentable/icons-react/icons/Home';

const App = () => <Home />;
```

---

## Props

| Name                  | Type               | Default        | Description                          |
| --------------------- | ------------------ | -------------- | ------------------------------------ |
| `size`                | `number \| string` | `24`           | Width & height (in `px`)             |
| `color`               | `string`           | `currentColor` | Stroke color                         |
| `strokeWidth`         | `number`           | `2`            | Stroke width                         |
| `absoluteStrokeWidth` | `boolean`          | `false`        | Auto-scale stroke based on icon size |

Supports all native SVG `SVGSVGElement` attributes.

---

## Migration from Lucide React

APIs are fully compatible, just replace the package name:

```diff
-import { Home } from 'lucide-react';
+import { Home } from '@agentable/icons-react';
```

---

Made with ❤️ by Agentable
