How to include bootstrap-vue icons into nuxtjs? Problem with navbar down arrows

user_4329643 0
Viewed 10952

Edit: hmm there might be a styling override -
I can take the dropdown from below thats working. And stick it into the nav area and the down arrow disappears. Same can be said for the "lang" drop down, if i move it to the body, the arrow shows up..

EDIT: FML - it was another nav bar styles overriding, USE SCOPE LOL

Navbar svg downarrows won't show up. Most other icons are working just fine..The code below is pretty much copy and pasted for bootstrap vue exampe..

<b-navbar toggleable="lg" type="dark" >
    <b-navbar-brand href="#"><img src="" class="d-inline-block align-top" width="220" height="45"></b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#"></b-nav-item>
        <b-nav-item href="#">Home</b-nav-item>
        <b-nav-item href="#">Contact Us</b-nav-item>
        <b-nav-item href="#">FAQ</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-item-dropdown  text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template v-slot:button-content>
            <em>Welcome, Friend</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>

Some icons work others don't.No errors are being throw.

The documentation says they are not installed by default...so I installed them with
https://icons.getbootstrap.com/#install
https://bootstrap-vue.js.org/docs/icons/

npm i bootstrap-icons

I created a plugin thats included nuxt.config.js.
The elements all seem to be working correctly but the icons..

 plugins: [
  '@/plugins/bootstrap-vue.js'
  ,'@/plugins/mixins/user.js'
],

/plugins/bootstrap.vue.js below 

import Vue from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

I also tried to include them specifically 

import {BootstrapVue,BIconArrowUp, BIconArrowDown } from 'bootstrap-vue'
Vue.use(BootstrapVue)
import { BootstrapVueIcons } from 'bootstrap-vue'
Vue.use(BootstrapVueIcons)[![enter image description here][1]][1]
Vue.component('BIconArrowUp', BIconArrowUp)
Vue.component('BIconArrowDown', BIconArrowDown)

1) I DON'T see any related to icons in the node_modules/bootstrap folder.
2) I DO see bootstrap.vue-icon.* in the node_modules/bootstrap-vue folder. It contains like -icons.common.js, -icons.css.


I ALso tried to add icons directly to the element like..

<b-nav-item-dropdown icon="circle-fill" text="Lang" right>

Here's a snip from bootstrap-vue site with the down arrow icons showing correctly. The very bottom photo is a snip of my project with the arrows missing..

Icons working

Here i added some of the other <b> components to my project to see if icons, arrows were working.And they do..
enter image description here
enter image description here

But for b-navbar-dropdown.... They don't work!

enter image description here


Suggestions?

bootstrap-vue nuxt.js vue.js css
5 Answers

According to the official docs, BootstrapVue does not install the icons plugin by default.

To enable this in Nuxt, edit your nuxt.config.js, find the 'bootstrap-vue/nuxt' module in the modules array and change it from this:

modules: [
  'bootstrap-vue/nuxt',

  // ...other modules
]

to this, with inline configs:

modules: [
  'bootstrap-vue/nuxt', {
    icons: true
  }
]

or this if you want separate module configs:

modules: [
  'bootstrap-vue/nuxt'
],

bootstrapVue: {
  icons: true
}
Soviut_469140

Soviut is mostly correct but the inline config option will not work but will throw a Nuxt Fatal Error. It only expects strings in the modules array. This solution does work however which is just creating an object for bootstrapVue specifying icons: true:

modules: [
  'bootstrap-vue/nuxt'
],

bootstrapVue: {
  icons: true
}
user_76792080

If you wish to reduce your production bundle size I would recommend you to import specific icons.

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    components: ['BIcon', 'BIconAlertFill', 'BIconCalendar', 'BIconGears']
   }
 }
user_125419450

We can import BootstrapVueIcons like this: first,edit bootstrap-vue.js file

my nuxtjs project second,add this content in this file 

import Vue from 'vue';

import { BootstrapVue ,BootstrapVueIcons} from 'bootstrap-vue';

Vue.use(BootstrapVue, {});

Vue.use(BootstrapVueIcons, {})
then you will get it.

user_46926990
user_17213450
Related