React Js 项目上的 Font Awesome 图标

Question

根据 Font Awesome 文档，我按照下面的示例进行操作，但没有得到任何结果。过去我在 html 项目中经常使用 font Awesome。但这是我第一次在我的 React 应用程序上使用它。如何在我的 React 应用程序上从 font Awesome 获取图标？

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

  export const Beverage = () => (
    <div>
      <FontAwesomeIcon icon="check-square" />
      Your <FontAwesomeIcon icon="coffee" /> is hot and ready!
    </div>
  )

有我的 package.json 依赖项。

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.2",
    "@fortawesome/free-solid-svg-icons": "^6.1.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "bootstrap": "^5.2.0",
    "formik": "^2.2.9",
    "jquery": "^3.6.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.2",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "redux": "^4.2.0",
    "redux-thunk": "^2.4.1",
    "web-vitals": "^2.1.4"
  }

Answer 1

https://github.com/FortAwesome/react-fontawesome

命令：安装fontawesome 和react-fontawesome

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid
$ npm i --save @fortawesome/fontawesome-free-regular
$ npm i --save @fortawesome/fontawesome-svg-core

然后在您的组件应用程序中。

import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'

     export const Beverage = () => (
        <div>
    
          Your  <FontAwesomeIcon icon={faCoffee} />is hot and ready!
        </div>
      )
    

Answer 2

创建 Icons.js/jsx

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

library.add(fas, fab, far);

导入App.js中的图标并导入FontAwesome

import './resources/Icons.jsx';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

用法

<p><FontAwesomeIcon icon="user" /> Machanomics</p>