How to put FontAwesome icons in react?

Question

I created one React project and I am trying to put FontAwesome icons in react project, but it is showing some syntax errors so help me to resolve this issue.

This is package.json file

{
  "name": "icons",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-brands-svg-icons": "^5.11.2",
    "@fortawesome/free-regular-svg-icons": "^5.11.2",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "@fortawesome/react-fontawesome": "^0.1.7",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

This is index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

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


serviceWorker.unregister();

I am getting error like this Error: Target container is not a DOM element.

Answer 1

As to your "I am getting error like this Error: Target container is not a DOM element." Error, you need to make sure that in your index.html file there is a div with an id of root like such <div id="root"></div>. ReactDOM (which is imported from import ReactDOM from "react-dom";) has a render method on it that converts your React code to plain JavaScript and then inserts it into the real DOM. The render method ONLY NEEDS TWO arguments to work, however a third argument can be used as a callback function like such ReactDOM.render(element, container, () => console.log("Application Mounted in DOM")), but I've never seen anyone use the callback function. You can read more about it here on the official document website ReactDOM.render, or you can watch a pretty decent video on it on YouTube here

---

Here are some further tips on using the icons in a reusable manner.

Follow these steps taken from the @fortawsome npmjs registry

1. Install the necessary packages for the cause

   $ npm i --save @fortawesome/fontawesome-svg-core
   $ npm i --save @fortawesome/free-solid-svg-icons
   $ npm i --save @fortawesome/react-fontawesome
   
   $ yarn add @fortawesome/fontawesome-svg-core
   $ yarn add @fortawesome/free-solid-svg-icons
   $ yarn add @fortawesome/react-fontawesome
   

2. Install some MORE of the free stuff in that they were nice enough to provide :)

   $ npm i --save @fortawesome/pro-solid-svg-icons
   $ npm i --save @fortawesome/pro-regular-svg-icons
   $ npm i --save @fortawesome/pro-light-svg-icons
   $ npm i --save @fortawesome/pro-duotone-svg-icons
   

3. Install even more if you are a paid pro member

   $ npm i --save @fortawesome/pro-solid-svg-icons
   $ npm i --save @fortawesome/pro-regular-svg-icons
   $ npm i --save @fortawesome/pro-light-svg-icons
   $ npm i --save @fortawesome/pro-duotone-svg-icons
   

---

Usage

Now, finally to the good part of actually using it in an application. I'm going to create a wrapper component around it, so that it's easy to reuse the icon/component later on, and in order to do this start by creating a file called CoffeeIcon.js, and in that file put in something along the lines of the following:

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";
import PropTypes from "prop-types";

const CoffeeIcon = props => {
  return (
    <React.Fragment>
      {props.labelText ? <label>{props.labelText}</label> : null}
      <FontAwesomeIcon
        icon={faCoffee}
        style={props.styles}
        id={props.id}
        className={props.className}
      />
    </React.Fragment>
  );
};

CoffeeIcon.propTypes = {
  labelText: PropTypes.string,
  id: PropTypes.string,
  className: PropTypes.string,
  styles: PropTypes.object
};

export default CoffeeIcon;

If you plan on using PropTypes for type checking and validation then add it to your application like such:

yarn add prop-types or npm i prop-types

And Finally, back in your component where you desire to use it, just do the following:

1. import it and place it just below your other import statements:

    import CoffeeIcon from "../Components/CoffeeIcon";
   

2. Drop in the component where you desire:

   <CoffeeIcon
     styles={{ color: "maroon" }} // optional
     id={"coffee-wrapper-id" || null} // optional
     className={"coffee-wrapper-class" || null} // optional
     labelText={"Coffee Icon"} // optional
   />
   

3. You're done and can now EASILY reuse it!

Answer 2

If you're not rendering the icon in App, you can render it by itself directly:

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(<div>{element}</div>, document.getElementById('root'));

But as Kraylog pointed out you are not using the ReactDOM.render method correctly. You can read about it here.

Answer 3

You got a little confused with rendering your React code into the DOM.

React.render() takes 2 parameters, the first is your React element, and the second is the target in your index.html file, whereas you have added 3 parameters, hence the error.

You would need to create a React stateless functional component in this scenario, called App:

function App() {
  return (
    <div>
      <FontAwesomeIcon icon={faCoffee} />
    </div>
  )
}

And now the jsx component is now available as per your existing code, so you can use:

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

Sources: https://reactjs.org/docs/components-and-props.html