Skip to content

metonym/svelte-baseui-icons

Repository files navigation

svelte-baseui-icons

NPM Build

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}

License

MIT