【问题标题】：FontAwesome spinner won't spin in ReactFontAwesome 微调器不会在 React 中旋转
【发布时间】：2021-02-07 00:54:12
【问题描述】：

我使用npx create-react-app 创建了一个 React 应用程序。

然后按照这些说明进行操作

https://fontawesome.com/how-to-use/on-the-web/using-with/react

我安装了 Font Awesome 依赖项：

npm i @fortawesome/fontawesome-svg-core
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome

然后我把App.js改成这样：

import logo from './logo.svg';
import './App.css';
import { FaSpinner } from 'react-icons/fa';

function App() {
  return (
    <div className="App">
          <FaSpinner icon="spinner" spin /> This is a test.
    </div>
  );
}

export default App;

但它只显示一个不旋转的微调器图标：

如何让微调器旋转？

注意：

在 React 之外，Font Awesome 工作正常，无需做任何额外的工作来为图标设置动画，例如这个简单的 HTML 代码显示了一个动画图标：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet"
          type="text/css"
          href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <title>testspin</title>
</head>
<body>
    <i class="fa fa-spinner fa-spin"
       aria-hidden="true"></i> 
This is a test
</body>
</html>

我需要做什么才能让 React 版本轻松工作？

【问题讨论】：

这能回答你的问题吗？ Font awesome spinner not spinning
FontAwsome 是图标库而不是动画库。使用 CSS 过渡或动画库，如 framer motion。
我发现了各种各样的帖子，但它们并不是特别关于 React。是的，我已经添加了 fa-spin 类等（<FaSpinner icon="spinner" spin className="fas fa-spinner fa-spin" />），但它在 React 中不起作用。
好吧，在 React 之外，我已经多次使用 Font Awesome，并且动画开箱即用，例如<i class="fas fa-spinner fa-spin"></i> 和 Font Awesome React 页面上的说明是简单地使用 <FontAwesomeIcon icon="spinner" spin /> 但它不会旋转。

标签： reactjs font-awesome

【解决方案1】：

默认情况下，微调器不会旋转。但是在创建新的 React 应用程序后触发它旋转的简单方法就像 React 的徽标一样。
为图标添加一个 className 旋转，并添加一个小 CSS 来触发它旋转，如下所示：

App.js

import react from 'react';
import './App.css';
import { FaSpinner } from 'react-icons/fa';

function App() {
  return (
    <div className="App">
          <FaSpinner icon="spinner" className="spinner" /> This is a test.
    </div>
  );
}

export default App;

App.css

.spinner {
    animation: spin infinite 5s linear;

    /*You can increase or decrease the timer (5s) to 
     increase or decrease the speed of the spinner*/
  }

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

【讨论】：

【解决方案2】：

实际上你只需要添加类fa-spin，不需要添加任何自定义css，这已经包含在类fa-spin的React-Fontawesome中。这是我的一个项目的一个例子：

import React, { useState } from 'react'
import { faCog, faFilePdf } from '@fortawesome/free-solid-svg-icons'
import { Button } from 'react-bootstrap'


const MyComponent = () => {
  const [pdfCreatingState,setPdfCreatingState] = useState(false);

  const handleClick = ev => {
      setPdfCreatingState(true);
      setTimeout(() => generatePDFDocument(docData,docName));
  }

  const generatePDFDocument = async (docData,docName) => {
      ...
  }
 
  return(
      <Button className="mr-4" onClick={handleClick}>
          <FontAwesomeIcon icon={pdfCreatingState ? faCog : faFilePdf} title={"Generate PDF report"} className={pdfCreatingState ? "fa-spin" : ""} />
      </Button>
  );

}

【讨论】：

这就是答案
它对我不起作用 :( 跨度>
@varun 我不是专家，我现在无法测试，但如果您尝试导入图标，也许可以？ import { sync } from '@fortawesome/free-solid-svg-icons'。我确定您已将必要的软件包添加到您的项目中？ yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome。然后使用<FontAwesomeIcon icon={sync} size={32} style={styles.colorGrey} onPress={onPressSync} className="fa-spin"/>。我只是一个想法

【解决方案3】：

我在使用 Nextjs 时遇到了同样的情况，并注意到没有为动画生成正确的 <style> 标记。所以我通过直接导入解决了这个问题。就我而言，添加 import "@fortawesome/fontawesome-svg-core/styles.css" 解决了这个问题，并且 FontAwesome 可以按预期工作。

【讨论】：