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 @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

All credit goes to Tailwind Labs for designing the icons and to the svg-to-svelte library for the tooling to wrap them as Svelte components.