无法在 React 中使用 Font Awesome

Posted 2023-03-13

【中文标题】无法在 React 中使用 Font Awesome

【英文标题】：Unable to use Font Awesome in React

【发布时间】：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 解析

我在没有打字稿的情况下尝试了上面的代码，它对我有用

【参考方案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。