https://github.com/lekoala/bootstrap-icon-element
A custom element to call Bootstrap Icons
https://github.com/lekoala/bootstrap-icon-element
bootstrap custom-element icon
Last synced: 5 months ago
JSON representation
A custom element to call Bootstrap Icons
- Host: GitHub
- URL: https://github.com/lekoala/bootstrap-icon-element
- Owner: lekoala
- License: mit
- Created: 2021-05-11T18:28:55.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-19T06:59:11.000Z (about 5 years ago)
- Last Synced: 2025-09-20T15:28:00.642Z (9 months ago)
- Topics: bootstrap, custom-element, icon
- Language: HTML
- Homepage:
- Size: 6.84 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# bootstrap-icon-element
[](https://nodei.co/npm/bootstrap-icon-element/)
[](https://www.npmjs.com/package/bootstrap-icon-element)
## How to use
Simply include the library
```js
import BootstrapIcon from "./bootstrap-icon-element.js";
```
And call your icons!
```html
Github
```
You need to include the following css:
```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:
```html
window.BootstrapIcon = { path: "/icons" };
```
## Why a custom element
- 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
## Why external css
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.
## Demo
https://codepen.io/lekoalabe/pen/WNpQPBm
## Need some other icon set ?
Check my other custom element: https://github.com/lekoala/last-icon