A utility for using Svelte with Bootstrap Icons' Font Loading Mechanism.

Recommended

I recommend using this with Purgecss to eliminate all of the unneeded classes. I also recommend using it with NexusFonts, as described below.

Enums

Icons

This is the only enum. It exports both camelCase and snake_case'd versions of all of the icons.

Components

BI

The BI/Bootstrap Icon component is the main component, and it creates the i element with your icon.

It takes an icon property, which is either one of the icons' dash-separated-names, or an item in the Icons enum.

LoadFontNexus

Loads the font from NexusFonts - via the Bootstrap Icons Font Family.

Note If you want the performance of NexusFonts, yet want to still have Purgecss be able to trim the stylesheet, you can load the .scss file manually & specify $bootstrap-icons-font-src as https://fonts.arson.wtf/api/v1/download/Bootstrap%20Icons.woff2. More information on specifying css import variables can be found here.

Note If you're importing other NexusFonts Fonts, you can just add the Bootstrap Icons family to your query directly - e.g. by appending &family=Bootstrap+Icons to the end - If you're not, you should check NexusFonts out :D

Loading manually via CSS/SCSS

If you have the bootstrap-icons package installed, you can use one of the following:

<script lang="ts">
  import 'bootstrap-icons/font/bootstrap-icons.scss';
  // or
  import 'bootstrap-icons/font/bootstrap-icons.min.css';
</script>

LoadFontJsDelivr

The LoadFontJsDelivr component imports Bootstrap Icons from jsdelivr. You can place it in your head if you prefer to avoid the above 2 options.