@dvuckovic/vue-bootstrap-icons v1.0.10

vue-bootstrap-icons

A Vue.js component for rendering Bootstrap Icons via the SVG sprite method.

For Vue 3 version of this component, check out @dvuckovic/vue3-bootstrap-icons.

Demo

Install

npm install --save @dvuckovic/vue-bootstrap-icons

Usage

Global component registration:

import Vue from 'vue';
import BootstrapIcon from '@dvuckovic/vue-bootstrap-icons';

Vue.component('BootstrapIcon', BootstrapIcon);

Local component registration:

import BootstrapIcon from '@dvuckovic/vue-bootstrap-icons';

export default {
    components: {
        BootstrapIcon,
    },
};

Usage in template:

<BootstrapIcon
    icon="exclamation-circle-fill"
    size="2x"
    flip-v />

SSR

For SSR environment, make sure to import from the following path:

import BootstrapIconSsr from '@dvuckovic/vue-bootstrap-icons/dist/bootstrap-icon.ssr';

IIFE

An IIFE-flavor build for including the component in existing pages is also provided, but you must make sure that the path to the Bootstrap Icons SVG sprite is declared first via the expected BootstrapIcons global variable:

<script>var BootstrapIcons = '/path/to/bootstrap-icons.svg';</script>
<script src="//unpkg.com/@dvuckovic/vue-bootstrap-icons/dist/bootstrap-icon.min.js"></script>

Note that the SVG sprite asset must be available via the same server where the page is hosted, in order for the inlining to work in all browsers (a security limitation).

Props

icon

The name of the icon, for a full list of supported icons please see the official documentation.

variant

The color of the icon, supports standard Bootstrap variants:

• success
• warning
• danger
• info
• primary
• secondary
• dark
• light

In addition to this, the component can inherit the current CSS color style, simply set it for the root element:

.bi {
    color: fuchsia;
}

size

The size of the icon, supports following values:

• sm
• md
• lg
• 2x
• 3x
• 4x
• 5x

In addition to this, the component can inherit the current CSS font size style, simply set it for the root element:

.bi {
    font-size: 2.5rem;
}

flip-h & flip-v

Flip the component on the horizontal or vertical axis. The two props can be combined, i.e.:

<BootstrapIcon
    icon="bar-chart-fill"
    flip-h
    flip-v />

rotate

The rotation of the icon, a number between -360 and 360.

animation

The animation style of the icon, supports following values:

• cylon
• cylon-vertical
• fade
• spin
• spin-reverse
• spin-pulse
• spin-reverse-pulse
• throb

All animations are infinite (loops).

Development

The component was packaged for NPM based on the vue-sfc-rollup template.

Feel free to submit issues and pull requests on Github.

Run Tests

npm test

Dev Server

npm run serve

Build

npm run build