svelte-bootstrap-icons

Bootstrap SVG icons as Svelte components with zero dependencies.

This package uses svelvg to convert source SVG files into Svelte components.

Installation

# NPM
npm i -D svelte-bootstrap-icons

# pnpm
pnpm i -D svelte-bootstrap-icons

# Bun
bun add -D svelte-bootstrap-icons

# Yarn
yarn add -D svelte-bootstrap-icons

Usage

See ICON_INDEX.md for a list of supported icons.

Base import

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

<Alarm />
<Bank />
<CloudMoon />

Direct import (recommended)

Import the icon directly for faster compiling during development.

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

Custom size

$$restProps are forwarded to the svg element.

Use the width and height attributes to customize the icon size. The default is 16px.

<Alarm width={24} height={24} />

Custom color

Use the fill attribute to specify a custom color.

<Alarm fill="red" />

metonym/svelte-bootstrap-icons