Package Exports

svelte-bootstrap-icons

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-bootstrap-icons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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, Wrench, ZoomOut } from "svelte-bootstrap-icons";
</script>

<Alarm />
<Github />
<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

Rendering icons using `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