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 the component from its size and icon type
    import { ShieldCheck } from '@natoboram/heroicons.svelte/16/solid'

    // Import the icon type from its size
    import { Solid } from '@natoboram/heroicons.svelte/16'

    // Import the name of the icon type, which is effectively the same as the import above
    import { Micro } from '@natoboram/heroicons.svelte'

    // Import `Heroicons`, which imports everything
    import { Heroicons } from '@natoboram/heroicons.svelte'

    // Use the Heroicon component with the icon's name
    import { Heroicon } from '@natoboram/heroicons.svelte/16/solid'
</script>

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

<!-- Import the icon type from its size -->
<Solid.ShieldCheck />

<!-- Import the name of the icon type, which is effectively the same as the import above -->
<Micro.ShieldCheck />

<!-- Import `Heroicons`, which imports everything -->
<Heroicons.Micro.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.

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