svelte-bootstrap-icons

Bootstrap SVG icons as Svelte components.

Try it in the Svelte REPL.

Install

This library requires Svelte version >=3.20.

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

Usage

<script>
  import { Alarm, Github, PaintBucket, Wrench, ZoomOut } from "svelte-bootstrap-icons";
</script>

<Alarm />
<Github />
<PaintBucket />
<Wrench />
<ZoomOut />

Refer to ICON_INDEX.md for list of icons.

Base import

Use the base import for faster compiling.

<script>
  import Alarm from "svelte-bootstrap-icons/lib/Alarm";
  // OR
  import Alarm from "svelte-bootstrap-icons/lib/Alarm/Alarm.svelte";
</script>

API

$$restProps are forwarded to the svg element.

Forwarded events

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

Usage with svelte:component

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

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

Changelog

Development workflow

Svelte components are generated from "bootstrap-icons" SVG files using svg-to-svelte.

A single script (build.js) specifies the input and output folders.

The generated Svelte components are located in 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 (see ICON_INDEX.md).

License

MIT