Font Awesome 图标不会出现在 DOM 中

Question

当我使用道具发送一串图标时，一些图标不会出现。

在我的数据库中，我有这些图标，例如字符串 STRING 类型 毕业帽或眼睛等图标通常会出现在页面上，但其他图标不会。

const CourseIcon = ({
courseType: { type, prefix, custom, faIcon, icon },
className,

...rest
}) => {
return custom ? (
 <img
   src={require(`../../img/course-icons/${icon}.png`)}
   className={classnames('course-icon', className)}
   title={type}
   alt={type}
 />
) : (
 <FontAwesomeIcon
   className={classnames('course-icon', className)}
   title={type}
   icon={faIcon}
   {...rest}
 />
);
};

CourseIcon.propTypes = {
courseType: PropTypes.object.isRequired,
};

export default CourseIcon;

这里是代码。当我在 courseType 上使用 console.log 时，所有内容都已定义。

Answer 1

新的 font-awesome 将图标样式拆分为几个包。在您安装了您需要的图标并将图标从它们正确导入到项目中之后，您还必须在使用带有FontAwesomeIcon 的图标时定义样式源。

例如：

导入和库定义：

// Notice that this icon comes from the regular style package.
import { faKeyboard } from '@fortawesome/free-regular-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';

library.add(faKeyboard);

然后，在你的组件内部：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

// ... other code parts

const YourComponent = () => {
  return (
    // The first element of the icon array will define your icon style
    // far = font awesome regular (obviously)
    // The rest of it will define the icon itself
    <FontAwesomeIcon icon={['far', 'keyboard']} />
  );
};

Answer 2

图片导出默认组件示例

import from const similar example
 const render_example =  
({
courseType: { type, prefix, custom, faIcon, icon },
className,

...rest
}) => and concat your render with this const if is neccesary

import React from 'react';
import './styles/styles.css';
import Logo from '../images/logo.svg';

class ClassName extends React.Component {
render() {
  return (
    <div className="class">
     <div className="_header">
      <img src={Logo} alt="Logo de la conferencia" />
       </div>
        <div className="section-name__class">
         <Gravatar className="image_avatar" email={this.props.email} />
          <h1>
          {this.props.firstname} <br /> {this.props.only__name}
          </h1>
        </div>
      </div>
    );
  }
}

export default image;