Render Bootstrap Icons Using SVG Sprite - vue3-bootstrap-icons

Install & Download:

# Yarn
$ yarn add @dvuckovic/vue3-bootstrap-icons bootstrap-icons
# NPM
$ npm install @dvuckovic/vue3-bootstrap-icons bootstrap-icons

Description:

vue3-bootstrap-icons is a Vue 3 component that allows you to render Bootstrap Icons using its SVG sprite system.

How to use it:

1. Import and register the vue3-bootstrap-icons.

import { createApp } from 'vue'
import App from './App.vue'
import { BootstrapIcon } from '@dvuckovic/vue3-bootstrap-icons'
import { injectBootstrapIcons } from '@dvuckovic/vue3-bootstrap-icons/utils'
import BootstrapIcons from 'bootstrap-icons/bootstrap-icons.svg?raw'
import '@dvuckovic/vue3-bootstrap-icons/dist/style.css'
injectBootstrapIcons(BootstrapIcons)
const app = createApp(App)
app.component('BootstrapIcon', BootstrapIcon)
app.mount('#app')

2. Render a Bootstrap icon in the app.

<BootstrapIcon 
  icon="award-fill" 
 />

3. Available component props to customize the Bootstrap icon.

icon: string
variant?: [
  'success',
  'warning',
  'danger',
  'info',
  'primary',
  'secondary',
  'dark',
  'light',
]
size?: ['sm', 'md', 'lg', '2x', '3x', '4x', '5x']
flipH?: boolean
flipV?: boolean
rotate?: String | Number
animation?: [
  'cylon',
  'cylon-vertical',
  'fade',
  'spin',
  'spin-reverse',
  'spin-pulse',
  'spin-reverse-pulse',
  'throb',
]