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
Top comments (0)