Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelted-heroicons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

svelted-heroicons

My attempt for better dev experience when using Heroicons in Svelte.

Installation

npm install --save-dev svelted-heroicons

Usage

1. 1-1

This means, one component for one equivalent icon.

<!-- src/lib/Icon.svelte -->
<script lang="ts">
  import MiniWifi from 'svelted-heroicons/dist/mini/Wifi.svelte';
  import SolidWifi from 'svelted-heroicons/dist/solid/Wifi.svelte';
  import OutlineWifi from 'svelted-heroicons/dist/outline/Wifi.svelte';
</script>

<SolidWifi style="width: 12px; height: 12px; color: red; background: blue;" />
<MiniWifi class="w-12 h-12 text-red-500 bg-blue-500" />

2. Dynamic 1-all (Recommended)

For those who don't like to have so many imports (including me), this is your way to go.

Create a wrapper component that acts as a main entry to access the icons.

<!-- src/lib/Icon.svelte -->
<script lang="ts">
    import type { IconType, IconName } from 'svelted-heroicons';
    export let type: IconType = 'solid';
    export let name: IconName;
</script>

{#await import(`../../node_modules/svelted-heroicons/dist/${type}/${name}.svelte`) then module} <!-- must be relative path due to dynamic-import-vars#limitations -->
    <svelte:component this={module.default} class={$$restProps.class} />
{/await}

Import Icon.svelte and start to use.

<script lang="ts">
    import Icon from '$lib/Icon.svelte';
</script>

<Icon name="AcademicCap" class="w-12 h-12 text-red-500" />
<Icon type="outline" name="AcademicCap" class="w-12 h-12 text-red-500" />
<Icon type="mini" name="AcademicCap" class="w-12 h-12 text-red-500" />