How to put FontAwesome icons in react? - reactjs

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

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

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

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
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
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
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:
import it and place it just below your other import statements:
import CoffeeIcon from "../Components/CoffeeIcon";
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
/>
You're done and can now EASILY reuse it!