0

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.

keyboard-warrior
  • 324
  • 2
  • 11

2 Answers2

1

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.

gre_gor
  • 6,669
  • 9
  • 47
  • 52
  • Right. I’m using the latest versions of everything so not sure why it’s missing from the icons. – keyboard-warrior Aug 26 '22 at 14:24
  • If Bootstrap Vue was compiled with older versions, installing newer ones won't help. – gre_gor Aug 26 '22 at 14:27
  • BootstrapVue docs are saying they haven't added any new Bootstrap Icons since v1.5.0. The icon you want was added in v1.7.0 and so isn't available yet in BootstrapVue – yoduh Aug 26 '22 at 14:29
0

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.

yoduh
  • 7,074
  • 2
  • 11
  • 21
  • Nope it’s there in their docs, just searched and found it. It’s missing from their package though – keyboard-warrior Aug 26 '22 at 14:25
  • 1
    ??? I linked you the BootstrapVue docs and it's entire list of icons. The send icon does not show up when you search for it. Remember, BootstrapVue is NOT the same as Bootstrap. The Bootstrap list of available icons are not the same as the BootstrapVue list of available icons – yoduh Aug 26 '22 at 14:27