时间戳

首页 > 解决方案 > 在 React JS 中使用 font-awesome

reactjs - 在 React JS 中使用 font-awesome

问题描述

我是 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 中做什么才能访问这些包中的所有字体和图标？我检查了多个来源，信息因站点而异。您能否解释一下它是如何完成的以及在文件顶部的“导入”之后应该写什么。

标签： reactjsnpmfont-awesome

解决方案

您也可以通过这种方式导入所有带有 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;

推荐阅读