无法在React中使用Font Awesome

Question

关注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是一个错误的名称，并不存在。没有运气就试过sintall https://www.npmjs.com/package/@types/react-fontawesome。

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

Answer 1

使用fontawesome并使用Object, object

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';这个问题。

Answer 2

作为打字稿支持之前的解决方法，我们是这样做的：

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

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

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