Dynamically Switch Bootstrap Vue Icons when hovered
Need a simple way to switch out a Boostrap Vue icons when you hover over them? You came to the right place!
For this we have a simple template in Vue.js that is using Bootstrap Vue. We here we are just rendering the circle-plus icon:
But what if we want to switch that icon out for another? So first we need to keep track of if the icon is hovered or not:
We added isHovered to the data() method and initiated it as false, because whenever it is not being hovered, it is false. When it is hovered over, let’s switch it to true.
Now we will add some event handlers to change the state of isHovered:
And now that the state of the isHovered function is handled whenever we hover over the icon, let’s dynamically switch out the icon using the v-bind method on icon=””. We will use :icon= to do this and create a method that will return the type of icon we’d like based on the state of isHovered.
Whenever the isHovered === true I want the plus-circle-fill icon. Whenever the isHovered === false, I want the plus-circle icon, no fill.
Now we can plug this into the template like so:
I added a class at the end icon-style to style the size of the icon and color.
There you have it, now you can dynamically render which icon you want to show conditionally!
