Using font-awesome in React JS - reactjs

Question

I'm new to React JS and I'm trying to add font-awesome into my project. I have installed Node.js and npm. I have also included the following packages:
$ npm i --save #fortawesome/fontawesome-svg-core
$ npm i --save #fortawesome/free-solid-svg-icons
$ npm i --save #fortawesome/react-fontawesome
Now, what should I do in index.js to be able to access all fonts and icons from these packages? I have checked multiple sources and information differs from site to site. Could you please explain how it's done and what should be written after "import" at the top of the file.

Answer 1

Also you can import all free font awesome icons with fas and fab prefixes in this way.
At first you need to install these packages.
npm i -S #fortawesome/fontawesome-svg-core #fortawesome/free-brands-svg-icons #fortawesome/free-solid-svg-icons #fortawesome/react-fontawesome
And then add fas and fab prefixes from FA lib to your root file
import { library } from "#fortawesome/fontawesome-svg-core";
import { fas } from "#fortawesome/free-solid-svg-icons";
import { fab } from "#fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
library.add(fas, fab);
const App = () => {
return (
<div>
<!-- Icon of fas prefix -->
<FontAwesomeIcon icon="home" />
<!-- Icon of fab prefix -->
<FontAwesomeIcon icon={['fab', 'google']} />
</div>
);
};
export default App;

Answer 2

First, make sure your package.json has font-awesome. If it does
not use npm i font-awesome to install it.
Second, You need to import the fonts that are in css folder of
font-awesome. Add the line to your index.js file.
import "../node_modules/font-awesome/css/font-awesome.min.css";

Answer 3

That information is inside the docs, here is the extract for imports
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faCoffee } from '#fortawesome/free-solid-svg-icons'
const element = <FontAwesomeIcon icon={faCoffee} />
ReactDOM.render(element, document.body)
https://github.com/FortAwesome/react-fontawesome#explicit-import

Answer 4

Just stop the node application, install babel-loader finally run npm start. That should solve your problem.

Answer 5

Great Source to the point.
https://www.digitalocean.com/community/tutorials/how-to-use-font-awesome-5-with-react
import React from "react";
import { render } from "react-dom";
// get our fontawesome imports
import { faHome } from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
// create our App
const App = () => (
<div>
<FontAwesomeIcon icon={faHome} />
</div>
);
// render to #root
render(<App />, document.getElementById("root"));