Heroicons.Svelte

Exports Heroicons for usage with Svelte.

Usage

Install @natoboram/heroicons.svelte:

pnpm add -D @natoboram/heroicons.svelte

Tip

Does not require Tailwind CSS.

Each icon 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 customize icons by sending any data accepted by an <svg> element. For reference, here's the source code added to each icon:

<script lang="ts">
	import type { SVGAttributes } from 'svelte/elements'
	type Props = SVGAttributes<SVGSVGElement>
	const { class: className, ...rest }: Props = $props()
</script>

<svg
	{...rest}
	class="shield-check {className}"
	height="1.5rem"
	width="1.5rem"
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 24 24"
	fill="currentColor"
	aria-hidden="true"
	data-slot="icon"
>
	<!-- ... -->
</svg>

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. Also, you should set the size of the Heroicon component as the spinner might not be the same size as the icon.

Developing

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

pnpm run 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 run 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.