在 React JS 中使用 font-awesome答案

【问题标题】：Using font-awesome in React JS在 React JS 中使用 font-awesome
【发布时间】：2020-10-12 13:35:57
【问题描述】：

我是 React JS 的新手，我正在尝试将 font-awesome 添加到我的项目中。我已经安装了 Node.js 和 npm。我还包括以下软件包：

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

现在，我应该在 index.js 中做什么才能访问这些包中的所有字体和图标？我已经检查了多个来源，并且信息因站点而异。您能否解释一下它是如何完成的，以及在文件顶部的“import”之后应该写什么。

【问题讨论】：

标签： reactjs npm font-awesome

【解决方案1】：

该信息在文档中，这是导入的摘录

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

https://github.com/FortAwesome/react-fontawesome#explicit-import

【讨论】：

让我给你我的诚实意见。你想将它包含在你的反应代码中，没问题。但我真的认为你应该使用 CDN 来实现 fontawesome。当您部署应用程序时，这将有助于减少捆绑包的大小。
除此之外，您还需要 webpack 中的插件来将它们捆绑在一起。这会增加你的痛苦。
感谢您分享这个！因为我只是盯着 React JS，所以包和 npm 的概念对我来说是新事物。这就是为什么我问这个问题只是为了看看它是如何工作的，所以在未来我知道所有的使用选项:)

【解决方案2】：

首先，确保您的 package.json 字体很棒。如果确实如此不要使用npm i font-awesome 到install it。
其次，您需要导入位于css文件夹中的fonts 字体真棒。将该行添加到您的 index.js 文件中。 import "../node_modules/font-awesome/css/font-awesome.min.css";

【讨论】：

【解决方案3】：

您还可以通过这种方式导入所有带有 fas 和 fab 前缀的免费字体真棒图标。

首先你需要安装这些包。

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

然后将 FA lib 中的 fas 和 fab 前缀添加到您的根文件中

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { fab } from "@fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

library.add(fas, fab);

const App = () => {
  return (
    <div>
      <!-- Icon of fas prefix -->
      <FontAwesomeIcon icon="home" />
      <!-- Icon of fab prefix -->
      <FontAwesomeIcon icon={['fab', 'google']} />
    </div>
  );
};

export default App;

【讨论】：

【解决方案4】：

只需停止节点应用程序，安装babel-loader 最后运行npm start。这应该可以解决您的问题。

【讨论】：

【解决方案5】：

重要的来源。

https://www.digitalocean.com/community/tutorials/how-to-use-font-awesome-5-with-react

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

【讨论】：