FontAwesome 微调器不会在 React 中旋转
Edw*_*uay 2 font-awesome reactjs
我创建了一个 React 应用程序npx create-react-app。
然后按照这些说明
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 版本如此轻松地工作？
Joh*_*zio 18
实际上你只需要添加类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>
);
}
小智 11
默认情况下，微调器不会旋转。但是一个简单的方法是在创建一个新的 React 应用程序后触发它旋转，就像 React 的标志一样。向图标添加一个旋转
的className并添加一个小 css 来触发它旋转，如下所示：
应用程序.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);
}
}
| 归档时间： |
|
| 查看次数： |
3022 次 |
| 最近记录： |