Simply include the library
import BootstrapIcon from "./bootstrap-icon-element.js";
And call your icons!
<bs-i name="star"></bs-i>
<bs-i name="github" style="--size: 24px"></bs-i>
<bs-i name="alarm-fill" style="--size: 36px; color: red"></bs-i>
<a href="#" class="btn btn-primary"> <bs-i name="github" class="me-1"></bs-i> Github </a>
You need to include the following css:
bs-i {
--size: 1em;
display: inline-flex;
width: var(--size);
height: var(--size);
vertical-align: middle;
}
bs-i svg {
display: block;
width: 100%;
height: 100%;
}
You can set a custom base path:
<script>
window.BootstrapIcon = { path: "/icons" };
</script>
- External sprite or font is loading all the icons which lead to extra load time
- Including svg is leading to really super long html and not very developer friendly
- No need for custom js inliner, it feels cleaner overall
A custom element css is not loaded until the component itself is loaded, which can lead to FOUC and things moving around as the icon appear. The solution I've found so far is to apply some global css rules than are known before the component is loaded.
https://codepen.io/lekoalabe/pen/WNpQPBm
Check my other custom element: https://github.com/lekoala/last-icon