# IcoGlyphs

> Animated SVG icon system delivered as a web component.

IcoGlyphs is an icon library where each icon is defined by its carves — a compact JSON structure describing SVG path segments using spatial primitives. Icons are served from a CDN as the `<icoglyph-svg>` custom element with built-in morph animations, or as static SVG images.

## Quick start

### Static SVG (no JavaScript, no auth)

```html
<img src="https://cdn.icoglyphs.com/svg/arrow-right" alt="Arrow right" />
```

### Web component (full animations, no auth required)

```html
<script src="https://cdn.icoglyphs.com/loader.js"></script>
<icoglyph-svg use="arrow-right"></icoglyph-svg>
```

## Styling with CSS custom properties

The `<icoglyph-svg>` element exposes these CSS custom properties:

| Property                | Default  | Description                    |
|-------------------------|----------|--------------------------------|
| `--ig-stroke`           | grey     | Stroke color                   |
| `--ig-stroke-width`     | 0.4rem   | Stroke width                   |
| `--ig-stroke-linejoin`  | round    | Line join style                |
| `--ig-stroke-linecap`   | round    | Line cap style                 |
| `--ig-stroke-opacity`   | 1        | Stroke opacity                 |
| `--ig-fill`             | none     | Fill color                     |
| `--ig-transition`       | 0.75s    | CSS transition for animations  |

Example:

```css
icoglyph-svg {
  --ig-stroke: #333;
  --ig-stroke-width: 3px;
  --ig-fill: none;
}
```

The inner `<svg>` element is exposed via `::part(svg)` for additional styling.

## Carves format

Carves is a JSON array of path objects. Each object describes an SVG path using these fields:

- `primitive` — path primitive type (`l`, `q`, `t`, `c`, `v`)
- `spatial` — coordinate data for the path
- `orientation` — rotation / positioning data

You can pass carves directly as a JSON string:

```html
<icoglyph-svg use='[{"primitive":"l","spatial":[0,-30,20,10]}]'></icoglyph-svg>
```

Or use an icon alias which resolves via the API:

```html
<icoglyph-svg use="arrow-right"></icoglyph-svg>
```

## API

The REST API serves icon data at `https://api.icoglyphs.com`.

| Method | Endpoint                      | Description                    | Auth     |
|--------|-------------------------------|--------------------------------|----------|
| GET    | `/v1/ig`                      | List all public icons          | No       |
| GET    | `/v1/ig/:alias`               | Full icon data by alias        | No       |
| GET    | `/v1/ig/:alias/carves`        | Carves data only               | No       |

## Links

- Website: https://icoglyphs.com
- CDN: https://cdn.icoglyphs.com
- API: https://api.icoglyphs.com
- Custom Elements Manifest: https://cdn.icoglyphs.com/custom-elements.json
- Full documentation: https://icoglyphs.com/llms-full.txt

## Available icons

Each icon can have multiple aliases that currently display the same visual. Always pick the alias closest in meaning to your intent — aliases may diverge into distinct icons in the future. Use the chosen alias with `use="alias"` or as static SVG via `/svg/alias`.

- add
- allowed, permitted, granted, authorized (same visual today, pick the most relevant)
- arrow-down, arrow-bottom (same visual today, pick the most relevant)
- arrow-down-left, arrow-bottom-left (same visual today, pick the most relevant)
- arrow-down-right, arrow-bottom-right (same visual today, pick the most relevant)
- arrow-left
- arrow-right
- arrow-up, arrow-top, arrow (same visual today, pick the most relevant)
- arrow-up-left, arrow-top-left (same visual today, pick the most relevant)
- arrow-up-right, arrow-top-right (same visual today, pick the most relevant)
- back, go-back, previous, return, prev, undo (same visual today, pick the most relevant)
- conflict, clash (same visual today, pick the most relevant)
- copy
- dark-mode
- delete
- denied, forbidden, blocked, unauthorized (same visual today, pick the most relevant)
- divide, split, frontier (same visual today, pick the most relevant)
- download, save, dl (same visual today, pick the most relevant)
- duality, dual, pair, two (same visual today, pick the most relevant)
- duplicate
- enter, entry (same visual today, pick the most relevant)
- exit, out, leave (same visual today, pick the most relevant)
- eye
- forward, go-forward, next, ahead, proceed, redo (same visual today, pick the most relevant)
- fullscreen, enter-fullscreen (same visual today, pick the most relevant)
- grey-mode
- group
- hide, eye-off, blind, mask (same visual today, pick the most relevant)
- light-mode
- merge, union (same visual today, pick the most relevant)
- multiple, multi, plural, many (same visual today, pick the most relevant)
- no, minus, refuse (same visual today, pick the most relevant)
- oppression, dominance, intimidation (same visual today, pick the most relevant)
- over
- random, randomize, shuffle, mix, chance, oracle (same visual today, pick the most relevant)
- rebellion, uprising (same visual today, pick the most relevant)
- refresh, reload, cycle, repeat, renew (same visual today, pick the most relevant)
- saved, stored, downloaded, copied (same visual today, pick the most relevant)
- scale-down, smaller (same visual today, pick the most relevant)
- scale-up, bigger (same visual today, pick the most relevant)
- selected, select (same visual today, pick the most relevant)
- share
- under
- unique, single, unicity, one (same visual today, pick the most relevant)
- unselect, deselect (same visual today, pick the most relevant)
- wifi, signal, sensor (same visual today, pick the most relevant)
- yes, confirm, accept (same visual today, pick the most relevant)