时间戳

首页 > 解决方案 > Font Awesome 图标不会出现在 DOM 中

reactjs - Font Awesome 图标不会出现在 DOM 中

问题描述

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

在我的数据库中，我有这些图标，如字符串 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 时，所有内容都已定义。

标签： reactjsfont-awesome

解决方案

新的 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']} />
  );
};

推荐阅读