reactjs - FontAwesomeIcon "defined but never used"即使它是必需的

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

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

它说你需要在 App.js 中包含下面的代码(不一定，但是如果你想在很多文件中使用 font awesome 图标，最好让它是全局性的)

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' 等

还有icon = 'github', 'coffee'等

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