Icons
The icon components from BootstrapVue are deprecated. While migrating to BootstrapVueNext the icon components will not be supported as there are better, more modern solutions to incorporating icon packages into your application. Continue reading BootstrapVueNext's suggestion on how to incorporate Bootstrap-icons into your application!
Unplugin Icons
In this section you will learn how to incorporateunplugin-icons into your app. unplugin-icons allows you to use icons from multiple icon sets, such asBootstrap Icons,Material Design Icons,Font Awesome 4 and many more all with automatic tree-shaking!.
Installation
To set up unplugin-icons, you can read directly from their documentationhere or keep reading for a quick start guide.
Preferred Installation
The preferred installation makes use ofunplugin-vue-components as it follows the same principles as thepreferred installation for our core package.
To start, install the necessary packages:
pnpm add unplugin-icons unplugin-vue-components @vue/compiler-sfc -Dbun add unplugin-icons unplugin-vue-components @vue/compiler-sfc -Dyarn add unplugin-icons unplugin-vue-components @vue/compiler-sfc -Dnpm i unplugin-icons unplugin-vue-components @vue/compiler-sfc -D// vite.config.js/tsimport {defineConfig}from 'vite'import vuefrom '@vitejs/plugin-vue'import Iconsfrom 'unplugin-icons/vite'import Componentsfrom 'unplugin-vue-components/vite'import IconsResolvefrom 'unplugin-icons/resolver'// https://vitejs.dev/config/export default defineConfig({ plugins: [ vue(), Components({ resolvers: [IconsResolve()], dts:true, }), Icons({ compiler:'vue3', autoInstall:true, }), ],})WithautoInstall: true using any icon set in your app will automatically import and include that icon set in your dependencies! No manual imports are required!
If you are using TypeScript you will want to add theunplugin-icons/types/vue to thecompilerOptions.types array. While there, you should also make sure you included thecomponents.d.ts in theinclude array:
// tsconfig.json{ "include": ["components.d.ts"], "compilerOptions": { "types": ["unplugin-icons/types/vue"] }}Then to include an icon, follow the formati-{collection}-{icon-name} in your template, where the collection is the id onhttps://icon-sets.iconify.design/. For example, to include0-circle in your app, simply use the componentIBi0Circle, no import is needed. As stated, you can use any icon from any icon set.
<IBi0Circle /><IBiActivity color="red" /><!-- You can use any icon set, no need to worry about importing --><IMdiAccountBox /><!-- fa --><IFaAngellist />View theunplugin-vue-components documentation for their extra feature, such asGlobal Custom Icon Transformation and other information.
Basic Installation
Of course, there is always the ability to slim down. To slim down the installation, you can manually import only the bootstrap-icons icon set, disable auto importing, and not use unplugin-vue-components read below. Note, the preferred installation automatically treeshakes all components, both installation methods should have the same final dist size.
pnpm add unplugin-icons @vue/compiler-sfc @iconify-json/bi -Dbun add unplugin-icons @vue/compiler-sfc @iconify-json/bi -Dyarn add unplugin-icons @vue/compiler-sfc @iconify-json/bi -Dnpm i unplugin-icons @vue/compiler-sfc @iconify-json/bi -D// vite.config.js/tsimport {defineConfig}from 'vite'import vuefrom '@vitejs/plugin-vue'import Iconsfrom 'unplugin-icons/vite'// https://vitejs.dev/config/export default defineConfig({ plugins: [ vue(), Icons({ compiler:'vue3', }), ],})Using this method, you will need to manually import each icon:
<template> <IBi0Circle /> <IBiActivity color="red" /> <!-- Cannot use, is not a dependency --> <!-- <IMdiAccountBox /> --> <!-- fa --> <!-- <IFaAngellist /> --></template><script setup lang="ts">import IBi0Circlefrom '~icons/bi/0-circle'import IBiActivityfrom '~icons/bi/activity'// import IMdiAccountBox from '~icons/mdi/account-box'// import IFaAngellist from '~icons/mdi/angellist'</script>