在React JS中使用font-awesome

Question

我是React JS的新手，我正在尝试将字体添加到我的项目中。我已经安装了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“之后应该写些什么？

Answer 1

这些信息在文档中，下面是imports的摘录

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

Answer 2

1. 首先，要确保你的package.json有超赞的字体。如果它不使用install it.

的npm i font-awesome

1. 第二，你需要导入fonts -的css文件夹中的字体。将该行添加到index.js文件中。import "../node_modules/font-awesome/css/font-awesome.min.css";

Answer 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;