/vtmn-icons-svelte

Primary LanguageJavaScript

vtmn-icons-svelte

Vitamin SVG icons as Svelte components.

This library builds icons from Vitamin Web Icons as Svelte components with zero dependencies.

Install

yarn add -D @vtmn/icons-svelte
# OR
npm i -D @vtmn/icons-svelte

Usage

<script>
  import { AddFill, AddLine, AlertFill } from '@vtmn/icons-svelte';
</script>

<AddFill />
<AddLine />
<AlertFill />

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

API

$$restProps are forwarded to the svg element.

NOTE: Width and height are set to 16px by default

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}

Dev

To update vtmn-icons-svelte

npm i -D @vtmn/icons-svelte@latest
git add --all
git commit -m "update @vtmn/icons-svelte"
npm version <major|minor|patch>
npm publish
git push