svelte-heroicons

Yet another Svelte wrapper for Heroicons.

This library differs from others in a couple main ways:

The icon components forward common event listeners to the underlying SVG, so you may use on:click and so on;
The API is closer to the official React wrappers, making it easier to use when converting Tailwind UI components to Svelte in conjunction with svelte-headlessui;
It's based on the latest version of Heroicons (at time of writing), 1.0.5

Installation

npm install -D @rgossiaux/svelte-heroicons

Usage

Heroicons contains two types of icons: outline and solid. They can be imported from @rgossiaux/svelte-heroicons/outline and @rgossiaux/svelte-heroicons/solid respectively.

All icon names are CamelCased and end with the word Icon; for example, the academic-cap icon on heroicons.com is imported as AcademicCapIcon.

<script>
  import { SelectorIcon } from "@rgossiaux/svelte-heroicons/solid";
  import { CheckIcon } from "@rgossiaux/svelte-heroicons/outline";
</script>

<CheckIcon />
<SelectorIcon class="my-class" aria-hidden="true" />

Documentation

See heroicons.com for the full list of icons.

License

As with the main Heroicons library, this library is MIT licensed.

Credit