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

Question

我有一个使用FontAwesome图标的React项目。为了保持代码DRY，我想把我的图标导入保存在一个单独的文件中，使用图标库，按照这里的指南: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"} 

我想我在这里漏掉了一个重要的内容。文档并没有完全清楚在图书馆建立之后该做什么。任何想法吗?

Answer 1

这是react中另一种缓存字体awesome的方法。从这个链接找到它

Answer 2

你需要从fontawesome:

中导入实体(带有'fas'标签)图标npm I @ fortawsome/free-solid-svg-icons或添加@ fortawsome/free-solid-svg-icons