Heroicons.Svelte

Exports Heroicons for usage with Svelte.

Usage

Install @natoboram/heroicons.svelte:

pnpm add -D @natoboram/heroicons.svelte

Each icons can be imported individually as a Svelte component.

<script lang="ts">
    import { Heroicon, ShieldCheck } from '@natoboram/heroicons.svelte/24/solid'
</script>

<!-- Import the component from its size and icon type -->
<ShieldCheck />

<!-- Use the Heroicon component with the icon's name -->
<Heroicon icon="shield-check" />

You can send an arbitrary class to the components as if they were HTML elements. By default, they have a size set by the Tailwind classes w-5 h-5 or w-6 h-6, but if you set another class, then these size classes are not applied.

The Heroicon components are there for when you need to dynamically set the icon. They will display a loading spinner until the icon is loaded. To avoid this spinner, directly import the appropriate component instead.

Developing

Once you've installed dependencies with pnpm install, start a Storybook server:

pnpm storybook

The entire package is auto-generated by scripts/build_heroicons.ts, so you might want to check out this file first.

Building

To create a production version:

pnpm build-heroicons

License

This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0.