# Svelte Heros

<div class="flex gap-2 my-8">
<a href="https://github.com/sponsors/shinokada" target="_blank"><img src="https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86" alt="sponsor" ></a>
<a href="https://www.npmjs.com/package/svelte-heros" rel="nofollow" target="_blank"><img src="https://img.shields.io/npm/v/svelte-heros" alt="npm" ></a>
<a href="https://www.npmjs.com/package/svelte-heros" rel="nofollow" target="_blank"><img src="https://img.shields.io/npm/v/svelte-heros/v1-latest" alt="npm" ></a>
<a href="https://twitter.com/shinokada" rel="nofollow" target="_blank"><img src="https://img.shields.io/badge/created%20by-@shinokada-4BBAAB.svg" alt="Created by Shin Okada" ></a>
<a href="http://www.apache.org/licenses/" rel="nofollow" target="_blank"><img src="https://img.shields.io/github/license/shinokada/svelte-heros" alt="License" ></a>
<a href="https://www.npmjs.com/package/svelte-heros" rel="nofollow" target="_blank"><img src="https://img.shields.io/npm/dw/svelte-heros.svg" alt="npm" ></a>
</div>

New version, [Svelte-Heros-v2](https://svelte-heros-v2.codewithshin.com) is out.

Hero Icons v1 for Svelte. You can select outline and solid icons using the variation props. Svlete-Heros support major CSS framework. You can add additional CSS using the `class` props.

## Docs

See the [Svelte Heros documentation](https://svelte-heros.codewithshin.com/) to learn more.

## Icons

- [Outline](https://svelte-heros.codewithshin.com/outline)
- [Solid](https://svelte-heros.codewithshin.com/solid)

## Repo

[GitHub Repo](https://github.com/shinokada/svelte-heros)

## Installation

### Svelte 5 or later

```
pnpm i svelte-heros
```

### Svelte 4/5

```sh
pnpm i svelte-heros@v1-latest
```

## Original source

[tailwindlabs/heroicons](https://github.com/tailwindlabs/heroicons)

## License

[Svelte-Heros License](https://github.com/shinokada/svelte-heros/blob/main/LICENSE)

[tailwindlabs/heroicons LICENSE](https://github.com/tailwindlabs/heroicons/blob/main/LICENSE)
