svelte-baseui-icons

Uber Base UI SVG icons as Svelte components.

This library builds icons from Uber Base Web as Svelte components with zero dependencies.

Install

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

Usage

<script>
  import { Alert, ArrowDown, Filter } from "svelte-baseui-icons";
</script>

<Alert width={24} />
<ArrowDown width={24} />
<Filter width={24} />

Refer to ICON_INDEX.md for a full list of icons.

API

$$restProps are forwarded to the svg element.

Forwarded events

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

Rendering using svelte:component

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

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

Changelog

License

MIT