svelte-bi

Bootstrap SVG Icons for Svelte >= 5 components

Why svelte-bi?

• Performance-Focused: Only the icons you actually use are included in your final application bundle, thanks to tree-shaking. No more importing a massive library for just a few icons.
• Easy to Use: Import icons as you would any other Svelte component.
• Fully Customizable: Easily control size, color, and other SVG attributes directly with props.
• TypeScript Support: Written entirely in TypeScript for a great developer experience.
• Complete Set: Includes all icons from the latest version of Bootstrap Icons.

Install

1# npm
2npm install svelte-bi
3
4# bun
5bun add svelte-bi
6
7# deno
8deno add npm:svelte-bi
9
10# pnpm
11pnpm add svelte-bi
12
13# yarn
14yarn add svelte-bi

Usage

Import from package

Component Naming Instructions

When calling the component, follow these steps:

1. Capitalize the First Letter of Each Word:

   • Take the symbol name and ensure that the first letter of every word is capitalized. For example, if the symbol name is arrow-90deg-left, it should be transformed to Arrow90degLeft.

2. Remove Hyphens:

   • Remove any hyphens (-) from the symbol name. This helps in creating a clean and readable component name.

3. Add Prefix:

   • Add the prefix Bi to the beginning of the transformed symbol name. This indicates that the component is part of the Bootstrap icon set.

Putting it all together, if the original symbol name is arrow-90deg-left, the final component name will be BiArrow90degLeft.

For example:

10-square-fill => Bi0SquareFill
2airplane-engines-fill => BiAirplaneEnginesFill

1<script>
2  import { Bi0SquareFill, BiAirplaneEnginesFill, BiGithub } from "svelte-bi";
3</script>
4
5<Bi0SquareFill />
6<BiAirplaneEnginesFill />

Props

size (optional)

Changes the dimensions of the icon.

type: number | string, default: 16

1<script>
2  import { BiGithub } from "svelte-bi";
3</script>
4
5<BiGithub size="43" />

fill (optional)

Changes the color of the icon.

type: string, default: currentColor

1<script>
2  import { BiGithub } from "svelte-bi";
3</script>
4
5<BiGithub fill="tomato" />

class (optional)

type: HTML class attribute, default: null

1<script>
2  import { BiGithub } from "svelte-bi";
3</script>
4
5<BiGithub class="pe-3 ms-2" />

...rest (optional)

type: HTML attributes

1<script>
2  import { BiGithub } from "svelte-bi";
3</script>
4
5<BiGithub onclick={(e) => console.log(e.target)} data-foo="bar" />

Develop

Deno required

1# git
2git clone https://github.com/sachinsancheti1/svelte-bi.git
3
4# github-cli
5gh repo clone sachinsancheti1/svelte-bi
6
7cd svelte-bi
8deno install
9deno run -A main.ts
10deno task package