@dvuckovic/vue3-bootstrap-icons

    1.0.4 • Public • Published

    vue3-bootstrap-icons

    Build Status Vue.js Bootstrap Icons License

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

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

    Demo Changelog

    Install

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

    Usage

    Global component registration:

    import Vue from 'vue';
    import BootstrapIcon from '@dvuckovic/vue3-bootstrap-icons';
    
    const app = Vue.createApp({});
    
    app.component('BootstrapIcon', BootstrapIcon);
    
    app.mount('#app);

    Local component registration:

    import { defineComponent } from 'vue';
    import BootstrapIcon from '@dvuckovic/vue3-bootstrap-icons';
    
    export default defineComponent({
        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/vue3-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/vue3-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

    Install

    npm i @dvuckovic/vue3-bootstrap-icons

    DownloadsWeekly Downloads

    11

    Version

    1.0.4

    License

    WTFPL

    Unpacked Size

    173 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar