@progressive-development/pd-icon

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

npm install @progressive-development/pd-icon

Quick Start

<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

Documentation

📖 Full documentation: pd-components.web.app

License

MIT © PD Progressive Development UG