A utility for using Svelte with Bootstrap Icons' Font Loading Mechanism.
I recommend using this with Purgecss to eliminate all of the unneeded classes. I also recommend using it with NexusFonts, as described below.
This is the only enum. It exports both camelCase and snake_case'd versions of all of the icons.
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.
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
ashttps://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
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>
The LoadFontJsDelivr
component imports Bootstrap Icons from jsdelivr. You can place it in your head if you prefer to avoid the above 2 options.