{"id":12898,"library":"bootstrap-icons-vue","title":"Bootstrap Icons as Vue 3 Components","description":"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.","status":"active","version":"1.11.3","language":"javascript","source_language":"en","source_url":"https://github.com/tommyip/bootstrap-icons-vue","tags":["javascript","Vue","VueJS","Vue3","Components","Icons","Bootstrap","Bootstrap Icons","typescript"],"install":[{"cmd":"npm install bootstrap-icons-vue","lang":"bash","label":"npm"},{"cmd":"yarn add bootstrap-icons-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add bootstrap-icons-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 3 application runtime.","package":"vue","optional":false}],"imports":[{"note":"Individual icons are named exports, following PascalCase convention prefixed with `BIcon` (e.g., `battery-full` becomes `BIconBatteryFull`). This method is tree-shakeable.","wrong":"const BIconBatteryFull = require('bootstrap-icons-vue').BIconBatteryFull","symbol":"BIconBatteryFull","correct":"import { BIconBatteryFull } from 'bootstrap-icons-vue'"},{"note":"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.","wrong":"const { BootstrapIconsPlugin } = require('bootstrap-icons-vue')","symbol":"BootstrapIconsPlugin","correct":"import { BootstrapIconsPlugin } from 'bootstrap-icons-vue'"},{"note":"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.","wrong":"import { BootstrapIconsVue } from 'bootstrap-icons-vue'","symbol":"BootstrapIconsVue","correct":"app.use(BootstrapIconsVue)"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport {\n  BIconBatteryFull,\n  BIconArrow90degDown,\n  BIconBookmark,\n} from 'bootstrap-icons-vue';\n\nconst app = createApp({\n  template: `\n    <div>\n      <p>Individual Icons:</p>\n      <BIconBatteryFull class=\"text-primary\" style=\"font-size: 2em;\" />\n      <BIconArrow90degDown class=\"text-danger\" />\n      <b-icon-bookmark class=\"text-success\" />\n    </div>\n  `\n});\n\napp.component('BIconBatteryFull', BIconBatteryFull);\napp.component('BIconArrow90degDown', BIconArrow90degDown);\napp.component('BIconBookmark', BIconBookmark);\n\napp.mount('#app');","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Using 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.","severity":"gotcha","affected_versions":">=0.4.0"},{"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.","message":"`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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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`.","message":"Icon 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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"An icon component was used in a Vue template but was not correctly imported and registered within the application or component scope.","error":"[Vue warn]: Failed to resolve component: BIconBatteryFull (or similar for any icon)"},{"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.","cause":"This typically occurs when the `BootstrapIconsPlugin` is used, which registers all icons globally, preventing bundlers from performing effective tree-shaking.","error":"My bundle size is unexpectedly large when using `bootstrap-icons-vue`."},{"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.","cause":"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.","error":"ReferenceError: BootstrapIconsVue is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}