# @progressive-development/pd-icon

[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-icon.svg)](https://www.npmjs.com/package/@progressive-development/pd-icon)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

SVG icon component with built-in icon set and smooth state animations.

## Features

- **Lit 3 & TypeScript** – Modern, type-safe web components
- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
- **Themeable** – CSS Custom Properties for easy customization
- **Lightweight** – No heavy dependencies, tree-shakeable
- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
- **SVG State Animations** – Smooth polygon morphing between active/inactive states using SMIL
- **Hybrid Icon System** – Static polygons, animated icons, and custom SVG templates
- **Extensive Styling API** – 15+ CSS Custom Properties for colors, backgrounds, and states
- **Semantic Status Icons** – Built-in error, warning, info, and help icons with outline/filled modes

## Installation

```bash
npm install @progressive-development/pd-icon
```

## Quick Start

```html
<script type="module">
  import '@progressive-development/pd-icon';
</script>

<pd-icon icon="check"></pd-icon>
<pd-icon icon="arrow-right" class="primary"></pd-icon>
```

## Components

| Component | Description |
|-----------|-------------|
| `<pd-icon>` | SVG icon with animation support |

## Documentation

📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)

## License

MIT © [PD Progressive Development UG](https://progressive-development.com)