svelte-bootstrap-icons

Bootstrap SVG icons as Svelte components

Usage no npm install needed!

<script type="module">
  import svelteBootstrapIcons from 'https://cdn.skypack.dev/svelte-bootstrap-icons';
</script>

README

svelte-bootstrap-icons

NPM

Bootstrap SVG icons as Svelte components.

Try it in the Svelte REPL.


Installation

Yarn

yarn add -D svelte-bootstrap-icons

NPM

npm i -D svelte-bootstrap-icons

pnpm

pnpm i -D svelte-bootstrap-icons

Usage

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

Base import

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

<Alarm />
<Bank />
<CloudMoon />
<Github />
<PaintBucket />
<Wrench />

Direct import (recommended)

Import the icon directly for faster compiling during development.

Note: even if using the base import method, unused imports are still tree shakeable by application bundlers like Rollup or webpack.

<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 this={icons[icon]} title={icon} />
    {icon}
  </div>
{/each}

TypeScript

Svelte version 3.31 or greater is required to use this library with TypeScript.

Changelog

Changelog

Contributing

See the contributing guidelines.

License

MIT