heroions-svelte

Heroicons SVG icons as Svelte components.

This zero dependency icon library builds heroicons as Svelte components.

Installation

# npm
npm i @agnosticeng/heroicons-svelte

# pnpm
pnpm i @agnosticeng/heroicons-svelte

# Yarn
yarn add @agnosticeng/heroicons-svelte

Note:

The dependency is only available on GitHub packages for now. Make sure to configure your .npmrc like so:

# .npmrc
@agnosticeng:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

Replace GITHUB_TOKEN by your own GitHub token (doc here)

Usage

Basic

Import the icon from the @agnosticeng/heroicons-svelte folder. See the Heroicons official list for a list of supported icons.

<script>
  import ArrowUp from "@agnosticeng/heroicons-svelte/outline/ArrowUp";
</script>

<ArrowUp />

or

<script>
  import { ArrowUp } from "@agnosticeng/heroicons-svelte/outline";
</script>

<ArrowUp />

Custom size

Use the size prop to specify the icon size.

The default size is 24.

<ArrowUp size={16} />
<ArrowUp size={18} />
<ArrowUp size={24} />

Custom props

$$restProps are forwarded to the svg element.

You can use stroke-width to customize the width of the stroke or pass any other valid svg attribute to the component.

<ArrowUp stroke-width="2" class="icon" />

API

Props

All props are optional.

License

MIT