真棒字体图标不会出现在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

新的字体棒极了，将图标样式分为几个包。安装所需的图标并将图标从图标正确导入到项目中后，将图标与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;