BootstrapVue Icons Import Specific Icon Only (Tree Shaking, Reduce Size)

Edit nuxt.config.js to import search icons only.

You need to import the necessary plugins as well if you utilize them, else they shall not be included.

module.exports = {  modules: ['bootstrap-vue/nuxt'],  bootstrapVue: {    // icons: true // Install the IconsPlugin (in addition to BootStrapVue plugin    // Add the desired icon components to the `components` array    components: ['BIconSearch'],    componentPlugins: ['NavbarPlugin', 'LayoutPlugin', 'ButtonPlugin', 'FormPlugin', 'FormInputPlugin', 'ImagePlugin', 'BadgePlugin', 'LinkPlugin', 'TablePlugin', 'InputGroupPlugin', 'SpinnerPlugin', 'PaginationPlugin', 'PaginationNavPlugin']  }}

You can also import via code.

import { BIcon, BIconSearch } from 'bootstrap-vue'

Analyze Webpack Bundle Size to make sure the entire icons package didn't get included.

Bugs

I notice there is a bug (BootstrapVue v2.21.2 and Nuxt v2.15.8), where the Tree Shaking seems to fail if I include SkeletonPlugin, but it works if I include BSkeleton skeleton only.

module.exports = {  modules: ['bootstrap-vue/nuxt'],  bootstrapVue: {    components: ['BSkeleton', 'BIconSearch'],    componentPlugins: [      'NavbarPlugin',       'LayoutPlugin',       'ButtonPlugin',       // 'SkeletonPlugin'    ]  }}

References:

https://bootstrap-vue.org/docs#icons

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.