svelte-bootstrap-icons

svelte-bootstrap-icons

Bootstrap SVG icons as Svelte components.

Try it in the Svelte REPL.

---

Install

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

Usage

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

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

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

Base import

Use the base import for faster compiling during development.

Note: even if using direct imports, unused imports are still treeshakeable 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 title="{icon}" this={icons[icon]} />
    {icon}
  </div>
{/each}

Changelog

Changelog

Contributing

See the contributing guidelines.

License

MIT

Changelog

1.4.0 - 2021-02-23

• Upgrade bootstrap-icons to version 1.4.0 (+60 icons)