无法在 React 中使用 Font Awesome答案

【问题标题】：Unable to use Font Awesome in React无法在 React 中使用 Font Awesome
【发布时间】：2018-09-14 08:12:01
【问题描述】：

关注official docs。运行后：

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome

和：

$ npm i --save @fortawesome/fontawesome-free-solid

正在尝试（TypeScript）：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/fontawesome-free-solid';
...
<FontAwesomeIcon icon={faCoffee} />

得到：

但是@types/@fortawesome/react-fontawesome 是一个错误的名称并且不存在。尝试安装 https://www.npmjs.com/package/@types/react-fontawesome 没有运气。

Visual Studio 代码。有什么建议吗？

【问题讨论】：

为什么不直接在 index.html 文件中链接而不需要 npm？
因为它为您提供了优化捆绑包的工具——不包括大量您不会使用的图标。
我明白了。感谢您的澄清。
请为这个库粘贴你的 package.json 内容和 package.lock 解析
我在没有打字稿的情况下尝试了上面的代码，它对我有用

标签： reactjs typescript npm visual-studio-code font-awesome

【解决方案1】：

在有打字稿支持之前，作为一种解决方法，这就是我们所做的：

declare module '@fortawesome/fontawesome-pro';
declare module '@fortawesome/react-fontawesome';

这被添加到我们的全局 ts 定义文件中：global.d.ts inside src 路径。

编辑：对我们来说，TS 中不需要第二行，也许你的 react-fontawesome 版本太旧了。我们的是"^0.1.14"

【讨论】：

【解决方案2】：

要使用fontawesome和反应使用react-fontawesome

npm i --save @fortawesome/fontawesome
npm i --save @fortawesome/react-fontawesome
npm i --save @fortawesome/fontawesome-free-solid

首先安装以上所有的包。然后如下使用。

import React from 'react'

import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import faCoffee from '@fortawesome/fontawesome-free-solid/faCoffee'

class Fonte extends React.Component {
  render () {
    return (
        <FontAwesomeIcon icon={faCoffee}/>
    )
  }
}

export default Fonte;

我相信这个问题是由于您的代码中的import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; this。

【讨论】：