svelte-heros-v2

Svelte-Heros-V2 with Heroicon v2.0.10

If you are looking for the version 1, go to Svelte-Heros

Hero Icons v2 for Svelte. You can select outline and solid icons using the variation props. Svlete-Heros support major CSS framework. You can add additional CSS using the class props.

Original source

tailwindlabs/heroicons v2.0.10

List of icons

Icon names

Installation

npm i -D svelte-heros-v2

To update

npm i -D svelte-heros-v2@latest

REPL

Outline demo

Solid demo

Usage

<script>
	import { AcademicCap } from 'svelte-heros-v2';
</script>

<AcademicCap />

Props

Name	Default
size	24
class
ariaLabel	file name
variation (solid or outline)	outline

Variation

The default variation value is outline. Use the variation prop to change it to solid.

<AcademicCap variation="solid" />

Size

Use the size prop to change the size of icons.

<AcademicCap size="30" />
<AcademicCap size="40" />
<AcademicCap size="50" />

CSS HEX Colors

Use the color prop to change colors with HEX color code.

<AcademicCap color="#ff0000" /> <AcademicCap color="#00ffd8" />

CSS framework support

Use the class prop to change colors and additional CSS.

For example, Tailwind CSS:

<AcademicCap class="text-pink-700 mr-4" />

If you use the dark mode on your website with Tailwind CSS, add your dark mode class to the class prop.

Let's use dark for the dark mode class as an example.

<AcademicCap class="text-pink-700 dark:text-blue-300" />

Bootstrap example:

<AcademicCap class="position-absolute top-0 px-1" />

aria-label

All icons have aria-label. For example AcademicCap has aria-label="academic cap". Use ariaLabel prop to modify the aria-label value.

<AcademicCap ariaLabel="red academic cap" class="text-red-500"></AcademicCap>

Passing down other attributes

You can pass other attibutes as well.

<AcademicCap tabindex="0" />

Using svelte:component

<script>
	import { AcademicCap } from 'svelte-heros-v2';
</script>

<svelte:component this="{AcademicCap}" size="40" />

Import all

Use import * as Icon from 'svelte-heros-v2'.

<script>
	import * as Icon from 'svelte-heros-v2';
</script>

<Icon.ShoppingBag size="30" class="text-red-500" />
<Icon.Sparkles size="40" class="text-blue-700" />
<Icon.Star size="50" class="text-green-700" />
<Icon.User size="60" class="text-purple-500" />
<Icon.Wifi size="100" class="text-purple-500" tabindex="0" />

Dynamically change the variation

<script>
	import { Map } from 'svelte-heros-v2';
	let isSolid = false;
</script>

<Map size="50" on:click={() => (isSolid = !isSolid)} variation={isSolid ? 'solid' : 'outline'} />

Events

All icons have the following events:

on:click
on:mouseenter
on:mouseleave
on:mouseover
on:mouseout

Other icons

• Svelte-Icon-Sets
• Svelte-Heros v1