# @nan0web/icons

<!-- %PACKAGE_STATUS% -->

Framework-agnostic SVG icons from react-icons sets — zero React dependency.
High performance, small footprint, and multiple adapters for every platform.

Features:
- **Zero Dependencies** — pure JS logic for core SVG rendering.
- **Framework Neutral** — use with React, Lit, Vanilla JS, or even in CLI.
- **Huge Icon Choice** — 12,000+ icons from popular sets (BS, FA, MD, HI, etc.).
- **Build-time Optimization** — no heavy icon packages in your runtime.
- **Typed** — full JSDoc and TypeScript support.

## Installation

How to install?
```bash
npm install @nan0web/icons
```

## Quick Start: Vanilla JS

Most simple way to use icons is using the `toSvg` function.

How to render icon as SVG string?
```js
import { toSvg } from '@nan0web/icons'
import { BsBank2 } from '@nan0web/icons/bs'
const svg = toSvg(BsBank2, { size: 24, color: 'royalblue' })
console.info(svg.slice(0, 80) + '...')
// → <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="royalblue" ...
```
## CLI / Terminal

Provide visual cues in terminal using Unicode approximations.

How to use icons in CLI?
```js
import { iconChar } from '@nan0web/icons/adapters/cli'
import { BsBank2 } from '@nan0web/icons/bs'
const char = iconChar(BsBank2)
console.info(char + ' Bank branch') // → 🏦 Bank branch
```
## Adapters

/**
@docs
### Lit Adapter

Use icons in Lit components with `html` template literal.

```javascript
import { icon } from '@nan0web/icons/adapters/lit'
import { BsBank2 } from '@nan0web/icons/bs'

// In your render() method:
html`${icon(BsBank2, { size: 20 })} Branch`
```

How to use Lit adapter?
```js
// This is a documentation-only test as it requires lit runtime
```
### React Adapter

Use icons as React components.

```jsx
import { Icon } from '@nan0web/icons/adapters/react'
import { BsBank2 } from '@nan0web/icons/bs'

function MyComponent() {
  return <Icon data={BsBank2} size={24} color="red" />
}
```

How to use React adapter?
```js
// Documentation-only
```
## Playground

Explore all 12,000+ icons in the [Universal Icon Explorer](https://nan0web.github.io/icons/play/).

How to explore icons locally?
```bash
git clone https://github.com/nan0web/icons.git
cd icons
npm install
npm run dev
```

## License
MIT

}