1

I want to render a FontAwsome User Icon as done here inside a VueJS component, I have tried to replicate the same example as you can see in this codesandbox, and I have tried the two approaches as the latter mentioned in the documentation, and applied the corresponding settings:

  1. el.innerHTML = "Hi <i class='fa-solid fa-user'</i>";
  2. el.innerHTML = "Hi <font-awesome-icon icon='fa-solid fa-user' />";

but the FontAwsome Icon was not rendered inside a VueJs component, can you please tell me How can I solve that please? thanks in advance.

Bilal
  • 3,191
  • 4
  • 21
  • 49
  • 1
    I recommend a more universal solution like that one: https://stackoverflow.com/a/72055404/8816585 Efficient and simple. – kissu Dec 20 '22 at 05:09
  • 1
    @kissu thanks for your kind suggestion, I will give it a try, and report back to you. – Bilal Dec 20 '22 at 05:22
  • @kissu thanks to your suggestion I found a simple solution by using SVG directly `el.innerHTML = 'Erreur ';` the other solution was complex for me to implement. – Bilal Dec 20 '22 at 06:37

1 Answers1

0

OP ended up using the following

el.innerHTML = 'Erreur <svg viewBox="0 0 384 512"><path fill="currentColor" d="M224 402.7V32c0-17.7-14.3-32-32-32s-32 14.3-32 32v370.7l-73.4-73.3c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 402.7z"></path></svg>';
kissu
  • 40,416
  • 14
  • 65
  • 133