Font-awesome: Vue.js icon doesn't work when you use v-if on the element or parent

[dacastro4]

Describe the problem

Vue.js icon doesn't work when you use v-if on the element or parent.

I guess the javascript takes the element and places it on the DOM again. I'm not quite sure exactly what its doing.

The URL of the

What did you expect?

Normal behavior from vue.js: element uses instruction v-if to show or not depending of the state of the variable.

What version and implementation are you using?

Version: v5.0.8
Browser and version: CDN

• [x] SVG with JS

Reproducible test case

https://jsfiddle.net/dacastro4/hedm6403/11/

[benc-uk]

I can reproduce this

Using FontAwesome 5 CSS via CDN in a Vue.js app. Anytime I use a <i class="fa fa-blah"></i> inside an element with v-if I get weird results

Same with updating a class with :class to change the icon - it doesn't work reactively, even if the Vue property reacts properly, the fa icon doesn't change

[tagliala]

@robmadole could you please take a look here?

[robmadole]

We have a Vue component that we've created to work with Vue.

https://github.com/FortAwesome/vue-fontawesome

Will that work @dacastro4 @benc-uk ?

[dacastro4]

@robmadole yes, changing to the vue component solves the issue but this would be a SVG JS issue, right?

[robmadole]

SVG with JS is not compatible with Vue.js (that's why we created the component 😉 )

[dacastro4]

Touché... then I think we need some sort of heads up or something.
Awesome job! this new font awesome rocks :)

Thank you so much!!

[robmadole]

Oh yes, agreed. The docs need to point people in the right direction a little better. We're working on that.

[KerryJones]

I've been beating my head on this for hours as I thought I was doing something wrong with Vue which somehow was multiplying my icons, so happy to have a solution.

[nise]

It is great that you have developed a fa component. But its is the question whether we need new vue components for every bug we find. I would prefer to find a solution instead of installing more an more components with a minimal extra value.