title: How to use font-awesome animated icons in Vue 3?
body: <p>I can import fontawesome-icons in <code>app.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>import {createApp} from 'vue';
  import app from &quot;../vue/app&quot;;
  import {library} from '@fortawesome/fontawesome-svg-core';
  import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
  import {faWrench} from '@fortawesome/free-solid-svg-icons';
  
  library.add(faWrench);
  
  createApp(app)
      .component('fa', FontAwesomeIcon)
      .mount(&quot;#app&quot;);
  </code></pre>
  <p>and use them in components like so:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;fa :icon=&quot;[ 'fa', 'wrench' ]&quot; size=&quot;2x&quot;&gt;&lt;/fa&gt;
  </code></pre>
  <p>The <a href="https://www.npmjs.com/package/font-awesome-animation" rel="nofollow noreferrer">font-awesome-animation npm doc</a> tells to use this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;i class=&quot;fa fa-wrench faa-wrench animated&quot;&gt;&lt;/i&gt;
  </code></pre>
  <p>but it doesn't seem to work in <code>Vue 3</code>.</p>
  <p>I've tried importing <code>font-awesome-animation</code> after installing it like so:</p>
  <pre class="lang-js prettyprint-override"><code>import {faaWrench} from 'font-awesome-animation';
  
  library.add(faaWrench);
  </code></pre>
  <p>but it breaks the site and the console shows:</p>
  <pre><code>Uncaught TypeError: Cannot read properties of undefined (reading 'prefix')
  </code></pre>
  <p>How do I use <code>font-awesome-animation</code> in <code>Vue 3</code>?</p>