FontAwesomeIcon "defined but never used" even though it is required - reactjs

Question

I recently added FontAwesomeReact to my React site. I'm using the icons in a Sidebar component that displays on every page.
Page:
import React from 'react'
import Header from '../components/header'
import Sidebar from '../components/sidebar'
import Layout from '../components/layout'
import Footer from '../components/footer'
class IndexPage extends React.Component {
render() {
return (
<Header />
<Sidebar />
<Layout>
<p>Hello there is some content here </p>
</Layout>
<Footer />
)
}
}
Sidebar component:
import React from 'react'
import Menucard from '../components/menucard'
import { library } from '#fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faInfoCircle, /*...*/, faCheck} from '#fortawesome/free-solid-svg-icons'
library.add(faInfoCircle,/*...*/,faCheck)
const clubAdminMenu = (
<div>
<h2>Club Admin</h2>
<ul>
<li className="pod">
<FontAwesomeIcon icon="user" pull="right" /> Manage Registrations
</li>
<li className="pod">
<a href="..."><FontAwesomeIcon ... /> ...<a>
</li>
...
</ul>
</div>
)
class Sidebar extends React.Component {
render() {
return (
<div className="Sidebar">
<Menucard content={clubAdminMenu} />
...
</div>
)
}
}
export default Sidebar
At first I assumed that <FontAwesomeIcon /> would be defined everywhere, since it's imported in <Sidebar /> and <Sidebar /> is on every page. Clearly I was wrong, the icons did not show up on any page unless I explicitly included import { FontAwesomeIcon } from '#fortawesome/react-fontawesome' on every single page.
But when I include that import on every page, the compiler warns me that 'FontAwesomeIcon' is defined but never used about a zillion times (once on every page that doesn't include <FontAwesomeIcon /> in its body, even if it is included in <Sidebar />) I get why it's saying this, but if I remove the import, the icons do not render in the sidebar on that page.
These two things seem to contradict each other. Am I missing something? Is there a better way to do this?

Answer 1

This is the official documentation for Font Awesome v5.15 https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react
It says that you need to include the below code in App.js (Not necessarily, but if you want to use font awesome icons in a lot of files, it is a good idea to make it Global)
import { library } from "#fortawesome/fontawesome-svg-core";
import { fab } from "#fortawesome/free-brands-svg-icons"; // To use branded icons such as Google, Github, etc.
import {
faCheckSquare,
faCoffee,
faInfoCircle,
// All other icons (except fab) that you want to use MUST be declared here
} from "#fortawesome/free-solid-svg-icons";
library.add(fab, faCheckSquare, faCoffee, faInfoCircle); // All icons imported must be added to the library
And then in every file where you want to use Font Awesome icons, you must include
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
And then to use the Font Awesome icons, you need to do the following:
<FontAwesomeIcon icon={[iconType, icon]} />
where iconType = 'fab', 'fas', etc.
and icon = 'github', 'coffee', etc.
<FontAwesomeIcon icon={['fab', 'google']} />
<FontAwesomeIcon icon={['fas', 'coffee']} />

Answer 2

When you import
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
You need to call
<FontAwesomeIcon />
The reason you get that message because you are just importing it but you never called it. So do as I suggested above