微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在 React 中使用 FontAwesome 图标库?

如何解决如何在 React 中使用 FontAwesome 图标库?

我有一个使用 FontAwesome 图标的 React 项目。为了保持代码干燥,我想使用图标库将我的图标导入保存在一个单独的文件中,按照此处的指南:https://fontawesome.com/how-to-use/javascript-api/setup/library

我使用以下代码添加一个 fontawesome.js 文件

import { library } from "@fortawesome/fontawesome-svg-core";

import { faCode,faHighlighter } from "@fortawesome/free-solid-svg-icons";

library.add(faCode,faHighlighter);

并将 fontawesome.js 导入我的 index.js。然后我尝试将 faCode 渲染到我的 Icon.js 组件:

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

export default function Icon() {
  return (
    <div>
        <FontAwesomeIcon icon={['fas','fa-code']} />
    </div>
  );
}

只遇到以下错误

Could not find icon {prefix: "fas",iconName: "fa-code"} 

我想我在这里遗漏了一个导入。文档并不完全清楚在图书馆建立后要做什么。有什么想法吗?

解决方法

这是另一种在 react 中缓存字体 awesome 的方法。从这个LINK

中找出答案 ,

您需要从 fontawesome 导入纯色(带有 'fas' 标签)图标:

npm i @fortawesome/free-solid-svg-icons 要么 纱线添加@fortawesome/free-solid-svg-icons

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。