如何在 Vue 3 中使用字体真棒的动画图标？答案

【问题标题】：How to use font-awesome animated icons in Vue 3?如何在 Vue 3 中使用字体真棒的动画图标？
【发布时间】：2022-01-18 13:22:59
【问题描述】：

我可以在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？

【问题讨论】：

标签： vue.js font-awesome vuejs3

【解决方案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

【讨论】：