how to install and use font awesome icons in react js easily

For a video tutorial watch this ☝🏿

First make a react project and install these 4 packages

//install this core package first
npm i --save @fortawesome/fontawesome-svg-core

//install first if you want to use solid icons and
//install second if you want to use regular icons
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

//install this react component to use fontawesome
npm i --save @fortawesome/react-fontawesome@latest

now go to here and pick any icon you like
https://fontawesome.com/search?o=r&s=regular%2Csolid&f=sharp

suppose i like this one

as you can see it's react code is this
<FontAwesomeIcon icon="fa-sharp fa-solid fa-hippo" />

so basicallly you need the last one i.e, fa-hippo
change this to CamelCase and remove dash(-) so it will be fa-hippo to faHippo
and now you can use it like this

import "./App.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHippo } from "@fortawesome/free-solid-svg-icons";
function App() {
  return (
    <div className="App">
      <FontAwesomeIcon icon={faHippo} />
    </div>
  );
}

export default App;

Press the like if you enjoyed this article