A Vue component library for Bootstrap icons

by Vue.js Examples

Bootstrap Icons Vue

Bootstrap Icons are designed to work with Bootstrap components, from form controls to navigation. But, they'll work in just about any project, too. That's because Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS.

This package provides bootstrap icons as Vue components.

Built from Bootstrap Icons v1.3.0. Requires Vue 3.

View Demo View Github

Usage

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.

With module bundlers

First install the package using your package manager of choice:

yarn add bootstrap-icons-vue

# or

npm install bootstrap-icons-vue

Then import the icons using one of the methods below:

1. Importing specific 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 for just 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 registers all icon components to the app instance, unused icons will not be tree-shakable.

Browser

Include the scripts from CDN as follows:

<script src="https://unpkg.com/vue@3.0.5"></script>
<script src="https://unpkg.com/bootstrap-icons-vue@0.5.0"></script>

Vue 3 does not have a global application instance, so it is not possible to install the icons components automatically. Instead the browser build exports a plugin BootstrapIconsVue to be installed:

const app = Vue.createApp(/** App **/);
app.use(BootstrapIconsVue);
app.mount('#app');

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.

GitHub