如何在 Vue 3 中使用超赞的动画图标？

Question

我可以在 app.js 中导入 fontawesome-icons:

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");

并像这样在组件中使用它们：

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

font-awesome-animation npm doc 告诉使用这个：

<i class="fa fa-wrench faa-wrench animated"></i>

但它似乎在 Vue 3 中不起作用。

我试过像这样安装后导入 font-awesome-animation：

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

library.add(faaWrench);

但它破坏了站点并且控制台显示：

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

如何在 Vue 3 中使用 font-awesome-animation？

Answer 1

font-awesome-animation 只是 CSS 动画关键帧的集合，定义为全局样式。该包没有任何导出，因此不要尝试从中导入任何内容（这只是 undefined，导致您在尝试将其添加到图标库时观察到的错误）。

要从 NPM 使用 font-awesome-animation，请像这样导入其 CSS 文件：

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

然后将 faa-ANIMATION_NAME（其中 ANIMATION_NAME 是来自 the library's animation list 的动画之一）和 animated 类附加到 <font-awesome-icon> .例如，此标记将 tada 动画应用于 fas-snowman 图标：

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

demo

如何在 Vue 3 中使用超赞的动画图标？

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

vue.js

font-awesome

vuejs3