# @agentable/icons-static

Framework-agnostic static icon library that can be used with `<i>` tags or
JavaScript calls, with Tree-Shaking support.

---

## Features

- 🚀 **Framework Agnostic**: Works with any web framework or vanilla JavaScript
- 📦 **Tree-Shakable**: Only bundle the icons you actually import
- 🎨 **Customizable**: Control styles through data attributes or JavaScript
  parameters
- 🔧 **TypeScript**: Complete type definitions out of the box

---

## Installation

```sh
pnpm add @agentable/icons-static
```

---

## Quick Start

### 1. Declarative Usage (Recommended)

Place `<i>` tags in HTML, then use JavaScript to replace them.

**HTML:**

```html
<i data-icon="home"></i>
<i data-icon="search" data-color="red" data-size="32"></i>
```

**JavaScript:**

```javascript
import { createIcons, Home, Search } from '@agentable/icons-static';

// Only replace the icons you declare, supports tree-shaking
createIcons({
  icons: {
    home: Home,
    search: Search,
  },
}).replace();
```

### 2. Imperative Usage

Create icons directly in JavaScript.

```javascript
import { createIcon, Home } from '@agentable/icons-static';

// Returns SVGElement in browser
const svgEl = createIcon(Home, { color: 'blue', size: 24 });
document.body.appendChild(svgEl);

// Returns SVG string in Node.js
const svgString = createIcon(Home, { color: 'blue', size: 24 });
```

---

## Props

| Name          | Type               | Default        |
| ------------- | ------------------ | -------------- |
| `size`        | `number \| string` | `24`           |
| `color`       | `string`           | `currentColor` |
| `strokeWidth` | `number`           | `2`            |

Supports all native SVG `SVGSVGElement` attributes.

---

Made with ❤️ by Agentable
