How to use font-awesome animated icons in Vue 3?-CodePudding

I can import fontawesome-icons in app.js:

import {createApp} from 'vue';
import app from "../vue/app";
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("#app");

and use them in components like so:

<fa :icon="[ 'fa', 'wrench' ]" size="2x"></fa>

The font-awesome-animation npm doc tells to use this:

<i ></i>

but it doesn't seem to work in Vue 3.

I've tried importing font-awesome-animation after installing it like so:

import {faaWrench} from 'font-awesome-animation';

library.add(faaWrench);

but it breaks the site and the console shows:

Uncaught TypeError: Cannot read properties of undefined (reading 'prefix')

How do I use font-awesome-animation in Vue 3?

CodePudding user response：

font-awesome-animation is just a collection of CSS animation keyframes, defined as global styles. The package does not have any exports, so don't try to import anything from it (which would just be undefined, leading to the error you observed when trying to add it to the icon library).

To use font-awesome-animation from NPM, import its CSS file like this:

// main.js
import 'font-awesome-animation/css/font-awesome-animation.min.css'

Then append the faa-ANIMATION_NAME (where ANIMATION_NAME is one of the animations from the library's animation list) and animated classes to a <font-awesome-icon>. For example, this markup applies the tada animation to the fas-snowman icon:

<font-awesome-icon :icon="['fas', 'snowman']"  />

demo