Can't show icon with fontawesome's react-js library

Question

import "./App.css";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

function App() {
return (
<div className="container">
  <input type="text" className="form-control" placeholder="Ara..." id="search_input"> 
</input>
  <button type="button" className="btn btn-light" id="search_button"><FontAwesomeIcon 
icon="search" /></button>

  <button type="button" className="btn btn-primary" id="buttons">E-Twinning</button>
  <button type="button" className="btn btn-primary" id="buttons">Erasmus</button>
</div>
 );
 }

export default App;

I need help about that. I have a png and svg file in the background, I tried to show svg and png files but it didn't work.

Answer 1

To use string in the icon prop ( the way you are using), you need to add those icons using library.add() to make it work.

Read more here. Check section "Using Icons via Global Use"

One other way is to import individual icons and use them.

import { faSearch } from "@fortawesome/free-solid-svg-icons";

<FontAwesomeIcon icon={faSearch} />