Package Exports

svelte-heroicons-component
svelte-heroicons-component/dist/index.js

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

Readme

Svelte Heroicons Component

Heroicons component for Svelte. Support Heroicons v1 and v2. Available props are: className, size, strokeWidth, and fill(solid icon only). You can also add on:click event.

Installing

npm install -D svelte-heroicons-component

Usage

/*
Check the name of icons from https://heroicons.com/ or https://v1.heroicons.com/.

To use heroicons home just import the HomeIcon component. If you want to use a solid icon import HomeSolidIcon.
*/
import { HomeIcon, HomeSolidIcon} from 'svelte-heroicons-component'


<HomeIcon />
<HomeSolidIcon />

// to add click event you can do like this
<HomeIcon on:click={callFunction} />

<HomeSolidIcon on:click={callFunction} />

// to add class name
<HomeIcon className="hidden lg:block" />

// default size is 1.5rem but you can customized the size like this example bellow
<HomeIcon size="10px" />
<HomeIcon size="20pt" />
<HomeIcon size="3em" />
<HomeIcon size="2rem" />
<HomeIcon size="4" /> # "The default unit size is rem, so this will be 4rem"

// If you use tailwindcss the classname w-* will override the size value
<HomeIcon size="4rem" className="w-6 h-6 xl:w-8 h-8" />

// the default strokewidth is 2 but you can change like this. Props strokeWidth only exists in outline icons
<HomeIcon strokeWidth="5" />

// If you use tailwindcss the classname stroke-* will override the strokeWidth value
<HomeIcon strokeWidth="5" className="stroke-2" />

// If you want to fill the color you can do like this. Props fill only exists in outline icons
<HomeIcon fill="#87CEEB" />

Available Icons: https://heroicons.com https://v1.heroicons.com/

Note: Add Icon to the end of component name (e.g., AcademicCapIcon) . For solid icon add SolicIcon to the end of component name (e.g., AcademicCapSolidIcon).