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

Question

In the following example, the initial icon renders but it does not change when the class changes.

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

BO41 is right, it is the font-awesome javascript that doesn't rerender. If you are okay with not using the new font-awesome svg/javascript icons, you can use font-awesome as a webfont with css.

In your index.html, delete the fontawesome script, and add the font-awesome css stylesheet:

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

Your code should work now.

---

The other possibility is to use the official font-awesome react package (it's a bit more of a hassle, but it uses the new svg icons)

Add necessary packages to project:

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

And the updated code:

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} />;
  }
}

See the github repo for more information: https://github.com/FortAwesome/react-fontawesome

Answer 2

You can configure fontawesome to nest the svg inside a <i> tag. This way react can rerender it.

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>

Answer 3

I assume you need to re-trigger the font awesome javascript to render the new icon. If you would use a real image with tag it would work like you intended