时间戳

首页 > 解决方案 > React-fontawesome - 图标说类是'fa fa-undefined fa-2x'

reactjs - 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>

标签： reactjsfont-awesomefont-awesome-5

解决方案

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

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

推荐阅读