0

I use bootstrap-vue in my nuxt project and bootstrap-vue-icons for icons. Everything works nicely, but I can't colorize my icons.

Plugin import:

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

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

Icon component:

<b-icon variant="danger" icon="check-circle"></b-icon>

package.json:

"bootstrap-vue": {
      "version": "2.23.1",
      "requires": {
        "@nuxt/opencollective": "^0.3.2",
        "bootstrap": "^4.6.1",
        "popper.js": "^1.16.1",
        "portal-vue": "^2.1.7",
        "vue-functional-data-merge": "^3.1.0"
      }
    },

I have tried as variant prop either dynamically binding color styles, it has not worked.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
sed9xa
  • 1
  • 1

1 Answers1

0

There are multiple ways of doing this: Notic variant="danger" gives the red color by default. Watch this you can add id and style it with css like:

<b-icon `variant="danger"` id="danger_icon" icon="check-circle"  ></b-icon>

#danger_icon{
  color:blue;
}

or change the default variant="danger" which is a class .text-danger color using css again

`<b-icon variant="danger" icon="check-circle"  ></b-icon>`

.text-danger {
color: black !important;

}

Watch this demo: jsfiddle

Zyfella
  • 65
  • 9
  • Thank you for you answer. I have already tried that, i understand that should work, but it didn't. Maybe there some versions problem, but now i just use default bootstrap icons – sed9xa Feb 03 '23 at 09:10