Package Exports

heroicons-for-svelte
heroicons-for-svelte/dist/index.js
heroicons-for-svelte/dist/index.mjs

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 (heroicons-for-svelte) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Heroicons for Svelte

Easy way to use Heroicons in your Svelte project.

Installation

Run: npm i heroicons-for-svelte

Usage

Basic import:

Component.svelte

<script>
    import Icon from "heroicons-for-svelte";
    import { Bell } from "heroicons-for-svelte/icons/outline";
</script>

<div>
    <Icon icon={Bell} />
</div>

Import both variants (outline and solid):

Component.svelte

<script>
    import Icon from "heroicons-for-svelte";
    import { Bell as OutlineBell } from "heroicons-for-svelte/icons/outline";
    import { Bell as SolidBell } from "heroicons-for-svelte/icons/solid";
</script>

<div>
    <Icon icon={OutlineBell} />
    <Icon icon={SolidBell} />
</div>

Setting the size using `class` or `style`:

You can set the size of the icons by simply setting the font size of the Icon component.

The default size for the icons is 1em.

Component.svelte

<script>
    import Icon from "heroicons-for-svelte"
    import { Bell as OutlineBell } from "heroicons-for-svelte/icons/outline"
    import { Bell as SolidBell } from "heroicons-for-svelte/icons/solid"
</script>

<Icon icon={OutlineBell} style="font-size: 24px"/>
<Icon icon={SolidBell} class="icon" />

<style>
    :global(.icon) {
        font-size: 3rem;
    }
</style>

Try the package in this Svelte REPL

Icons

For a full list of icons, see https://heroicons.com/
All the icons are available in the outline and solid variants.
Icon names have been converted to PascalCase (eg bell -> Bell or document-text -> DocumentText).

Development

Run: npm run setupDev
Edit and run: npm run prepublishOnly to build the package