@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';

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

2. Imperative Usage

Create icons directly in 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