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

Aug 24, 2020

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:

❤️ 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.