I am creating a Vue2 app and want to use Bootstrap5 icons. Specifically, I want to be able to use the "icon font" type (ie, <i class="bi-alarm"></i>) instead of embedding an SVG element.
So, I have installed the npm package like so:
npm i bootstrap-icons
but...now what? The Bootstrap5 icon docs did not say anything further. Do I need to install a SASS package? Should I create a Vue plugin? Or, just import the icons as needed for each component?
I am using Vue-CLI.
Thank you for any tips!
Taking a cue from this answer by @Anonymous, you need to import the CSS from the package in order to use the the icons in <i> tags.
In much the same way as it can be imported from CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<div>
<p>This is an icon test:</p>
<i class="bi-alarm"></i>
<i class="bi bi-sunglasses" style="font-size: 5rem; color: blue;"></i>
<i class="bi-suit-heart-fill" style="font-size: 2rem; color: red;"></i>
</div>...you should be able to import it into your main.css file (or equivalent) locally from the installed package via:
@import url('../../../node_modules/bootstrap-icons/font/bootstrap-icons.css');
Also, to be thorough, I'll mention that you need to be using bootstrap-icons v1.2.0 or later to use them as fonts in the <i> tags.