CODEWITHSUNDEEP
vue.jsbootstrap-vuebootstrap-icons
keyboard-warrior
keyboard-warrior

Reputation: 352

Why only some of Bootstrap Vue icons work in a vue app using the latest Bootstrap Vue?

I have installed Bootstrap Vue using the instructions here: https://bootstrap-vue.org/docs/icons

I am on the latest version of each dependency:

"bootstrap": "^5.2.0",
"bootstrap-icons": "^1.8.1",
"bootstrap-vue": "^2.22.0",

In my src/main.js I am importing Bootstrap and the IconsPlugin like this, as directed:

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

When I try to use <b-icon icon="send" /> the icon is blank. However if I use something like <b-icon icon="menu-up" /> that one works, and displays as expected.

It seems like only some icons are working, not all though. I see these packages in my node_modules folder:

enter image description here

Also, looking in the file here /node_modules/bootstrap-vue/src/icons/icons.js I do not see anything for the send icon.

Is Bootstrap Vue configured properly? Is the bootstrap-vue icons.js file somehow overwriting the bootstrap-icons module, since that js file does not have many of the newer icons found here?

Not sure what I am missing here, I followed exactly like they instructed.

Upvotes: 0

Views: 318

Answers (2)

gre_gor
gre_gor

Reputation: 6803

From the Bootstrap Vue link you posted:

Bootstrap Icons v1.5.0 were added in BootstrapVue v2.22.0.

"send" icon was added in 1.7.0.

Upvotes: 1

yoduh
yoduh

Reputation: 14649

The bootstrap-vue docs has an icon explorer section you can search for available icons. Searching for "send" shows No matching icons found. Try searching again. It appears you're trying to use an icon that isn't available.

Upvotes: 0

Related Questions