svelte-spectrum-icons

Adobe Spectrum Workflow and UI SVG icons as Svelte components.

This library builds Adobe Spectrum Workflow and UI icons as Svelte components with zero dependencies.

Spectrum icons have two sizes: 18 for desktop and 24 for mobile.

For Workflow icons, the sizes are appended to the icon name. For example, Add becomes Add18 and Add24.

For UI icons, the word "Mobile" is appended to the icon name; Asterisk is size 18 while AsteriskMobile is size 24.

Try it in the Svelte REPL.

Icon Preview

Install

yarn add -D svelte-spectrum-icons
# OR
npm i -D svelte-spectrum-icons

Usage

<script>
  import Asterisk from "svelte-spectrum-icons/ui/Asterisk.svelte";
  import Add24 from "svelte-spectrum-icons/workflow/Add24.svelte";
</script>

<Asterisk />
<Add24 />

For a full list of supported icons:

• UI: UI_ICONS.md
• Workflow: WORKFLOW_ICONS.md

API

$$restProps are forwarded to the svg element.

Forwarded events

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

Changelog

License

MIT