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;

应用程序.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

实际上你只需要添加类

fa-spin

，不需要添加任何自定义CSS，这已经包含在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 提供的答案对于平滑旋转非常有效。如果有人尝试创建“脉冲”或“步进”旋转器，请按照以下步骤操作：

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" />

Answer 5

Fontawesome 通过媒体查询禁用动画

prefers-reduced-motion

。

因此，重要的是相应地配置您的用户首选项，以免阻止它们。

FontAwesome 旋转器不会在 React 中旋转

问题描述投票：0回答：5

注意：

5个回答

最新问题

FontAwesome 旋转器不会在 React 中旋转

问题描述 投票：0回答：5

注意：

5个回答

最新问题

问题描述投票：0回答：5