@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
pnpm add @agentable/icons-static
Quick Start
1. Declarative Usage (Recommended)
Place <i>
tags in HTML, then use JavaScript to replace them.
HTML:
<i data-icon="home"></i>
<i data-icon="search" data-color="red" data-size="32"></i>
JavaScript:
import { createIcons, Home, Search } from '@agentable/icons-static';
createIcons({
icons: {
home: Home,
search: Search,
},
}).replace();
2. Imperative Usage
Create icons directly in JavaScript.
import { createIcon, Home } from '@agentable/icons-static';
const svgEl = createIcon(Home, { color: 'blue', size: 24 });
document.body.appendChild(svgEl);
const svgString = createIcon(Home, { color: 'blue', size: 24 });
Props
size | number | string | 24 |
color | string | currentColor |
strokeWidth | number | 2 |
Supports all native SVG SVGSVGElement
attributes.
Made with ❤️ by Agentable