Registry / web-framework / bootstrap-icons-vue

bootstrap-icons-vue

library1.11.3jsnpmunverified

bootstrap-icons-vue is a lightweight library that provides Bootstrap Icons as native Vue 3 components. Currently at version 1.11.3, its release cadence is tightly coupled with the upstream `bootstrap-icons` library, ensuring users always have access to the latest icon sets shortly after their release. The library differentiates itself by offering direct Vue 3 component integration, avoiding the need to pull in the entire BootstrapVue framework, which targets Vue 2 and includes many more components than just icons. It supports both individual icon imports for optimal tree-shaking and a plugin for global registration, catering to various project needs. With over 1900 icons, it offers a comprehensive icon solution for modern Vue 3 applications.

web-framework

npm install bootstrap-icons-vue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BOOTSTRAP-ICONS-VU

bootstrap-icons-vue

web-frameworkjavascriptv1.11.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

BIconBatteryFull

✓ import { BIconBatteryFull } from 'bootstrap-icons-vue'

✗ const BIconBatteryFull = require('bootstrap-icons-vue').BIconBatteryFull

Individual icons are named exports, following PascalCase convention prefixed with `BIcon` (e.g., `battery-full` becomes `BIconBatteryFull`). This method is tree-shakeable.

BootstrapIconsPlugin

✓ import { BootstrapIconsPlugin } from 'bootstrap-icons-vue'

✗ const { BootstrapIconsPlugin } = require('bootstrap-icons-vue')

This plugin registers all available Bootstrap Icons globally within your Vue application. While convenient, it prevents individual icons from being tree-shaken, potentially increasing bundle size.

BootstrapIconsVue

✓ app.use(BootstrapIconsVue)

✗ import { BootstrapIconsVue } from 'bootstrap-icons-vue'

This symbol is exposed as a global variable when using the CDN build (e.g., `<script src='https://unpkg.com/bootstrap-icons-vue'></script>`). It's intended for direct browser usage with `Vue.createApp()`, not for module imports in bundler environments.

Demonstrates how to import individual Bootstrap Icon components and register them globally in a Vue 3 application. This approach allows for optimal tree-shaking, ensuring only used icons are included in the final bundle.

import { createApp } from 'vue'; import { BIconBatteryFull, BIconArrow90degDown, BIconBookmark, } from 'bootstrap-icons-vue'; const app = createApp({ template: ` <div> <p>Individual Icons:</p> <BIconBatteryFull class="text-primary" style="font-size: 2em;" /> <BIconArrow90degDown class="text-danger" /> <b-icon-bookmark class="text-success" /> </div> ` }); app.component('BIconBatteryFull', BIconBatteryFull); app.component('BIconArrow90degDown', BIconArrow90degDown); app.component('BIconBookmark', BIconBookmark); app.mount('#app');

Debug

Known issues

gotchaUsing the `BootstrapIconsPlugin` to register all icons globally will prevent individual icons from being tree-shaken by bundlers, potentially leading to a larger final bundle size than necessary.

fix

For optimal bundle size, import and register only the specific icon components you intend to use. This allows bundlers to effectively tree-shake unused icons.

affects: >=0.4.0

gotcha`bootstrap-icons-vue` is designed for Vue 3.x and is NOT intended for use alongside BootstrapVue. BootstrapVue targets Vue 2.x and includes its own (often deprecated in favor of external solutions) icon components.

fix

If you are on Vue 2.x, consider BootstrapVue. If on Vue 3.x and needing Bootstrap components, look into BootstrapVueNext or other dedicated Vue 3 component libraries. `bootstrap-icons-vue` is purely for the icons themselves.

affects: >=0.1.0

gotchaIcon components follow a `PascalCase` naming convention, prefixed with `BIcon` (e.g., `battery-full` becomes `BIconBatteryFull`). Using incorrect casing or prefixes will result in component resolution failures.

fix

Refer to the Bootstrap Icons website for original icon names, then convert them to `PascalCase` and prepend `BIcon`. For example, `arrow-90deg-down` maps to `BIconArrow90degDown`. Vue templates also support `kebab-case` if the component is registered with `PascalCase`.

affects: >=0.1.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: BIconBatteryFull (or similar for any icon)

An icon component was used in a Vue template but was not correctly imported and registered within the application or component scope.

fix

Either import individual icon components (e.g., `import { BIconBatteryFull } from 'bootstrap-icons-vue';`) and register them in your component's `components` option or globally via `app.component()`, or use `app.use(BootstrapIconsPlugin)` to register all icons globally.

My bundle size is unexpectedly large when using `bootstrap-icons-vue`.

This typically occurs when the `BootstrapIconsPlugin` is used, which registers all icons globally, preventing bundlers from performing effective tree-shaking.

fix

For optimal bundle size, avoid the `BootstrapIconsPlugin`. Instead, import and register only the specific icon components you need in each component or globally. `bootstrap-icons-vue` versions since v0.4.1 include hints for bundlers like Terser to enable tree-shaking for individual icon imports.

ReferenceError: BootstrapIconsVue is not defined

This error arises when attempting to use the `BootstrapIconsVue` global plugin (e.g., `app.use(BootstrapIconsVue)`) in a module-based environment without having the CDN script loaded, or when incorrectly trying to import it as a named module.

fix

If using a CDN, ensure the `<script src="https://unpkg.com/bootstrap-icons-vue@latest"></script>` tag is present and loaded before your Vue application script. If using a module bundler, import named icon components or the `BootstrapIconsPlugin` (e.g., `import { BootstrapIconsPlugin } from 'bootstrap-icons-vue';`) instead.

Upgrade

Version history

1.11.3latest on npm

Audit

Dependencies

vuerequiredPeer dependency for Vue 3 application runtime.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/tommyip/bootstrap-icons-vue ↗

packagehttps://www.npmjs.com/package/bootstrap-icons-vue ↗

homepagehttps://bootstrap-icons-vue.vercel.app ↗