FontAwesome 微调器不会在 React 中旋转

Question

我使用 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 版本如此轻松地工作？

Answer 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);
  }
}

Answer 2

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

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

}

Answer 3

我遇到了与 Nextjs 相同的情况，并注意到没有生成正确的 <style> 动画标签。所以我直接导入解决了这个问题。在我的例子中，添加 import "@fortawesome/fontawesome-svg-core/styles.css" 解决了这个问题，并且 FontAwesome 按预期工作。

Answer 4

在我的项目中，我使用的是 react-icons/fa，@Qudusayo 提供的答案对于平滑的旋转器非常有效。如果有人试图创建 'pulsed' 或 'step' 微调器，请按以下方法操作：

CSS:

.icon_pulse {
    animation: circle 1.2s steps(8) infinite;
}

@keyframes circle {
    from {
        transform: rotate(90deg);
    }

    to {
        transform: rotate(450deg);
    }
}

JSX:

<FaSpinner className="icon_pulse" />

FontAwesome 微调器不会在 React 中旋转

FontAwesome spinner won't spin in React

font-awesome

reactjs

注意：