为什么 FontAwesome “翻转”动画在 React 中不起作用？答案

【问题标题】：Why doesn't FontAwesome "flip" animation work in React?为什么 FontAwesome “翻转”动画在 React 中不起作用？
【发布时间】：2022-06-13 05:25:01
【问题描述】：

我正在显式添加单个图标，如下所示： https://fontawesome.com/v6/docs/web/use-with/react/add-icons#add-some-style

我使用的代码是：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faRocket } from '@fortawesome/free-solid-svg-icons' 

...
<FontAwesomeIcon icon={faRocket} flip />
...

似乎大多数其他动画都可以正常工作。例如，当我将“翻转”替换为“旋转”时，图标会旋转。我不能让它翻转。

另外值得一提的是，当我这样写代码时：

<i class="fa-solid fa-rocket fa-flip"></i>

翻转动画有效。

【问题讨论】：

标签： reactjs font-awesome react-font-awesome font-awesome-6

【解决方案1】：

如果您仔细查看 FontAwesomeIcon 组件，您会看到它可以接收的所有道具以及它们的预期值。

在flip 的情况下，它只需要三个可能的值，但您需要指定要使用哪一个，否则它将不起作用。

例如，您的组件如下所示：

<FontAwesomeIcon icon={faRocket} flip='vertical' />

【讨论】：