I'm using Nuxt with bootstarp-vue so far all the components are working as expected. but some bootstrap-vue icons are not showing up
index.vue
<b-icon-arrow-up></b-icon-arrow-up>
<b-icon icon="bar-chart-fill"></b-icon>
<b-icon icon="cart"></b-icon>
nuxt.config.js
modules: [
'bootstrap-vue/nuxt',
],
bootstrapVue: {
icons: true,
},
Both b-icon-arrow-up and b-icon icon="bar-chart-fill" are working and coming as SVG in to the DOM. It's only the b-icon icon="cart" SVG tag has an empty g in it. I've also tried with a couple of more icons as well camera, slash-circle are coming and alarm, back icons are not coming just like cart.
I have also tried to pull cart as a single component from the bootstarp-vue like this,
import { BIcon, BIconCart } from 'bootstrap-vue'
.....
export default {
components: {
BIcon,
BIconCart
},
....
which didn't work either I just got an error saying the component BIconCart is not found
The version of BootstrapVue you're using probably doesn't have the icon you're looking for, so try updating BootstrapVue to the latest version.
You can see which version of BootstrapVue contains which version of Bootstrap-Icons on the icons page https://bootstrap-vue.org/docs/icons.
Current reference as of this post: