FontAwesomeIcon “已定义但从未使用”，即使它是必需的

Question

我最近将 FontAwesomeReact 添加到我的 React 站点。我正在使用显示在每个页面上的侧边栏组件中的图标。

页面：

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 />
        )
    }
}

侧边栏组件：

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">
        <a href="..."><FontAwesomeIcon icon="user" pull="right" /> Manage Registrations</a>
      </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

• 起初我认为<FontAwesomeIcon /> 会在任何地方定义，因为它是在<Sidebar /> 中导入的，而<Sidebar /> 在每个页面上。显然我错了，除非我在每个页面上明确包含 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'，否则图标不会显示在任何页面上。
• 但是当我在每个页面上包含 import 时，编译器会警告我 'FontAwesomeIcon' is defined but never used 大约无数次（在每个页面上一次，它的正文中不包含 <FontAwesomeIcon />，即使它包含在<Sidebar />) 我明白为什么会这样说，但如果我删除导入，图标不会呈现在该页面的侧边栏中。

这两件事似乎相互矛盾。我错过了什么吗？有没有更好的方法来做到这一点？

Answer 1

导入时

 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

你需要打电话

  <FontAwesomeIcon />

您收到该消息的原因是您只是在导入它，但您从未调用它。按照我上面的建议去做

Answer 2

这是 Font Awesome v5.15 https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react的官方文档

它说您需要在 App.js 中包含以下代码（不一定，但是如果您想在很多文件中使用字体真棒图标，那么制作是个好主意全球）

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

然后在每个文件中你想使用 Font Awesome图标，你必须包含

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

然后要使用 Font Awesome 图标，您需要执行以下操作：

<FontAwesomeIcon icon={[iconType, icon]} />

其中 iconType = 'fab'、'fas' 等

and icon = 'github'、'coffee'等

<FontAwesomeIcon icon={['fab', 'google']} />
<FontAwesomeIcon icon={['fas', 'coffee']} />