React-fontawesome - 图标说类是'fa fa-undefined fa-2x'答案

【问题标题】：React-fontawesome - icon says class is 'fa fa-undefined fa-2x'React-fontawesome - 图标说类是'fa fa-undefined fa-2x'
【发布时间】：2020-03-14 08:48:16
【问题描述】：

我正在尝试在我的 react 应用程序中使用窗口关闭图标。 https://fontawesome.com/icons/window-close?style=regular

它没有显示出来，并且课程列表显示：fa fa-undefined fa-2x，所以一定有什么东西不能正常工作。

我的组件很小，所以代码不多。详细信息组件：

import React from 'react';
import FontAwesome from 'react-fontawesome';
import { faWindowClose } from '@fortawesome/free-regular-svg-icons';

const Details = (props) => {
    const className =
        'col details-col' + (props.showDetails ? '' : ' d-none');

    return (
        <div className={className}>
            <FontAwesome icon={faWindowClose} size={'2x'} />
            <h3 className={'text-center title details-title'}>
                Order Details
            </h3>
            <h4>{props.activeOrder.title}</h4>
        </div>
    );
};

export default Details;

这是完整呈现的 HTML：

<span icon="[object Object]" aria-hidden="true" class="fa fa-undefined fa-2x"></span>

【问题讨论】：

标签： reactjs font-awesome font-awesome-5

【解决方案1】：

我猜我导入了错误的 fontawesome 库。我从导入中删除了import FontAwesome from 'react-fontawesome';。我在安装后将import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 添加到我的导入中，效果很好！

应 brooksrelyt 的要求，我在这里学习了优秀的教程：https://scotch.io/tutorials/using-font-awesome-5-with-react

【讨论】：

你有这个文档的链接吗？
我现在添加了教程链接。