问题描述
我有一个使用 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