@3xpo/svelte-bootstrap-ico
v0.1.5
Published
Bootstrap Icons Font-style Wrapper
Downloads
43
Readme
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
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
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.