React-Fontawesome-图标显示类为“ fa fa-undefined fa-2x”

我正在尝试在我的应用程序中使用窗口关闭图标。 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>

sunlifen11 回答:React-Fontawesome-图标显示类为“ fa fa-undefined fa-2x”

我想我导入了错误的fontawesome库。我从导入中删除了import FontAwesome from 'react-fontawesome';。安装后,我在导入文件中添加了import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';,效果很好!

按照brooksrelyt的要求,我在这里遵循了出色的教程:https://scotch.io/tutorials/using-font-awesome-5-with-react

本文链接:https://www.f2er.com/3077506.html

大家都在问