# Icon

> Source: https://design.nanatec.co.ke/components/icon/
> An SVG icon component backed by a built-in icon set. Accepts a `name` attribute to render a named icon, or a default slot for custom SVG content.

An SVG icon component backed by a built-in icon set. Accepts a `name` attribute to render a named icon, or a default slot for custom SVG content.

## Preview

```html
<nana-icon name="edit"></nana-icon>
<nana-icon name="link"></nana-icon>
<nana-icon name="image"></nana-icon>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/icon";
```

## Basic usage

```html
<nana-icon name="edit"></nana-icon>
<nana-icon name="link"></nana-icon>
<nana-icon name="image"></nana-icon>
```

## API

## Slots

| Slot | Description |
|---|---|
| `(default)` | Custom SVG content (used when `name` is not provided) |

## All icons

Every icon in the built-in set. Search by name and click any icon to copy its
`name` — no guessing what exists.

## Related components

<ul class="related not-content">
  <li><a href="/components/table/">Table</a></li>
  <li><a href="/components/carousel/">Carousel</a></li>
  <li><a href="/components/carousel-item/">Carousel Item</a></li>
  <li><a href="/components/image-comparer/">Image Comparer</a></li>
  <li><a href="/components/qr-code/">QR Code</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-icon--docs