我如何才能将Font Awesome 5与React一起使用？

小编典典

我如何才能将Font Awesome 5与React一起使用？

reactjs

在以下示例中，将显示初始图标，但在类更改时它不会更改。

const Circle = ({ filled, onClick }) => {

  const className = filled ? 'fas fa-circle' : 'far fa-circle';



  return (

    <div onClick={onClick} >

      <i className={className} />

      <p>(class is {className})</p>

    </div>

  );

};



class App extends React.Component {

  state = { filled: false };



  handleClick = () => {

    this.setState({ filled: !this.state.filled });

  };



  render() {

    return <Circle filled={this.state.filled} onClick={this.handleClick} />;

  }

}



ReactDOM.render(<App />, document.getElementById("root"));


<script src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>



<div id="root"></div>

阅读 234

2020-07-22

共1个答案

小编典典

BO41是正确的，它是字体真棒的javascript，不会重新渲染。如果您可以不使用新的font-awesome svg /
javascript图标，可以将font-awesome用作css的网络字体。

在index.html中，删除fontawesome脚本，然后添加font-awesome css样式表：

<link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">

您的代码现在应该可以工作了。

另一种可能性是使用官方的字体超赞的react软件包（这有点麻烦，但它使用了新的svg图标）

向项目添加必要的包：

yarn add @fortawesome/fontawesome @fortawesome/react-fontawesome
yarn add @fortawesome/fontawesome-free-regular @fortawesome/fontawesome-free-solid

以及更新的代码：

import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCircle as fasCircle } from '@fortawesome/fontawesome-free-solid'
import { faCircle as farCircle } from '@fortawesome/fontawesome-free-regular'

const Circle = ({ filled, onClick }) => {

  return (
    <div onClick={onClick} >
      <FontAwesomeIcon icon={filled ? farCircle : fasCircle}/>
    </div>
  );
};

class App extends React.Component {
  state = { filled: false };

  handleClick = () => {
    this.setState({ filled: !this.state.filled });
  };

  render() {
    return <Circle filled={this.state.filled} onClick={this.handleClick} />;
  }
}

有关更多信息，请参见github回购：https :
//github.com/FortAwesome/react-
fontawesome

2020-07-22