我怎样才能让 Font Awesome 5 与 React 一起工作？

Question

在以下示例中，初始图标呈现但在 class 更改时它不会更改。

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>

Answer 1

我假设您需要重新触发 font awesome javascript 以呈现新图标。如果您使用带有标签的真实图像，它会像您预期的那样工作

Answer 2

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

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

另一种可能是使用官方的 font-awesome 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

Answer 3

您可以配置 fontawesome 以将 svg 嵌套在 <i> 标签中。这样react就可以重新渲染了。

https://fontawesome.com/how-to-use/svg-with-js

Nest tags instead of replacing There may be some cases where the replacement of the tag is just not working out like you need it to.

You can configure Font Awesome to nest the within the tag.

We start with an i tag

<script>
  FontAwesomeConfig = { autoReplaceSvg: 'nest' }
</script>
<i class="my-icon fas fa-coffee" data-fa-mask="fas fa-circle"></i>

And end up with an svg tag inside the original i

<i class="my-icon" data-fa-mask="fas fa-circle" data-fa-i2svg="">
  <svg class="svg-inline--fa fa-coffee fa-w-16" data-fa-mask="fas fa-circle" aria-hidden="true" data-fa-i2svg="" data-prefix="fas" data-icon="coffee" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">...</svg>
</i>

我怎样才能让 Font Awesome 5 与 React 一起工作？

How can I get Font Awesome 5 to work with React?

javascript

font-awesome

reactjs

font-awesome-5