README
![](https://raw.githubusercontent.com/tommyip/bootstrap-icons-vue/HEAD/assets/banner.jpg)
Bootstrap Icons Vue
Free, high quality, open source icon library with over 1,500 icons. Include them anyway you like—SVGs, SVG sprite, or web fonts. Use them with or without Bootstrap in any project. -- Bootstrap Icons
This library provides Bootstrap icons as Vue 3.x components.
Built from Bootstrap Icons v1.7.2.
Installation
# Using yarn
yarn add bootstrap-icons-vue
# Or npm
npm install bootstrap-icons-vue
Alternatively, you can use them straight from a CDN without installation.
<script src="https://unpkg.com/vue@3.2.23"></script>
<script src="https://unpkg.com/bootstrap-icons-vue@0.8.0"></script>
Usage
1. Importing individual icons
Making them globally available for an app:
import { createApp } from 'vue';
import { BIconBatteryFull, BIconArrow90degDown, BIconBookmark } from 'bootstrap-icons-vue';
const app = createApp(/** App **/);
app.component('BIconBatteryFull', BIconBatteryFull);
app.component('BIconArrow90degDown', BIconArrow90degDown);
app.component('BIconBookmark', BIconBookmark);
app.mount('#app');
Or just for one component:
import { BIconBatteryFull, BIconArrow90degDown, BIconBookmark } from 'bootstrap-icons-vue';
export default {
components: {
BIconBatteryFull,
BIconArrow90degDown,
BIconBatteryFull,
},
// ...
};
2. Importing all icons
import { createApp } from 'vue';
import { BootstrapIconsPlugin } from 'bootstrap-icons-vue';
const app = createApp(/** App **/);
app.use(BootstrapIconsPlugin);
app.mount('#app');
Note that this will register all icon components to the app instance, unused icons will not be tree-shakable.
3. Import all icons (for CDN build)
Vue 3 does not have a global application instance, so it is not possible to automatically expose the icons components. Instead you should install the provided plugin to your app instance.
const app = Vue.createApp(/** App **/);
app.use(BootstrapIconsVue);
app.mount('#app');
Naming convention
All icons are exported following the PascalCase
naming convention, prefixed with BIcon
. For example, the icon battery-full
is exported as BIconBatteryFull
, the icon arrow-90deg-down
is exported as BIconArrow90degDown
, etc. Vue allows you to refer to them in templates using either PascalCase
or kebab-case
.
<template>
<BIconArrow90degDown />
<!-- Or -->
<b-icon-arrow-90deg-down />
</template>
Each icon is 1em
in width and height. They can be styled by inheriting from their parent element, or receiving class or style attribute directly.
You can find the full list of available icons at https://icons.getbootstrap.com/.
BootstrapVue
Relation toBootstrapVue implements Bootstrap components (including Bootstrap Icons) and grid system as Vue 2 components. bootstrap-icons-vue is NOT intended to be used alongside BootstrapVue, as the latter is a superset of this project. Besides, they target different major Vue version.
This library is for those who wants to use Bootstrap Icons but do not wish to pull in a massive dependency (BootstrapVue).
Development
Install dependencies with yarn install
then generate icon files with yarn build
. To test the browser build, run yarn dev:cdn
. With the vite app, first link the library by running yarn link
in this directory, then yarn link bootstrap-icons-vue
in ./dev-vite
, finally run yarn dev:vite
back in this directory.
The upgrade.sh
script upgrades everything and update the docs with new version specifiers.