React-fontawesome - 图标显示 class 是 'fa fa-undefined fa-2x'

Question

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

它没有出现，class 列表说：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>

Answer 1

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

应 brooksrelyt 的要求，我按照这里的优秀教程进行操作：https://scotch.io/tutorials/using-font-awesome-5-with-react

React-fontawesome - 图标显示 class 是 'fa fa-undefined fa-2x'

React-fontawesome - icon says class is 'fa fa-undefined fa-2x'

font-awesome

reactjs

font-awesome-5