svelte-super-tiny-icons

Super Tiny Icons as Svelte components.

Try it in the Svelte REPL.

Installation

Yarn

yarn add -D svelte-super-tiny-icons

NPM

npm i -D svelte-super-tiny-icons

Usage

<script>
  import { Svelte } from "svelte-super-tiny-icons";
</script>

<Svelte width={48} />

See ICON_INDEX.md for list of icons.

API

$$restProps are forwarded to the svg element.

Forwarded events

• on:click
• on:mouseover
• on:mouseenter
• on:mouseout
• on:keydown

Using svelte:component

<script>
  import * as icons from "svelte-super-tiny-icons";
</script>

{#each Object.keys(icons) as icon}
  <div>
    <svelte:component this={icons[icon]} title={icon} height={48} />
    {icon}
  </div>
{/each}

Changelog

Changelog

Development workflow

Svelte components are generated from Super Tiny Icons SVG files using svg-to-svelte.

A single script build.js generates the components, along with documentation in Markdown format.

The generated Svelte components are emitted to the lib folder, which is ignored by Git but published to NPM.

Documentation is generated using the list of icon module names from the source library.

License

MIT