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

April 13, 2022

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:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.