导入名称中带有破折号（“-”）的 Font Awesome 图标

Question

我正在使用 React.js 制作作品集网站。我决定使用 Font Awesome 图标，因为我喜欢它们的外观。但是，当我去导入名称中包含该破折号的任何图标时，我不知道如何导入它。到目前为止，这是我的代码（用于导入）：

import "font-awesome/css/font-awesome.min.css";

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

// All these are single name icons
import {faPython} from "@fortawesome/free-brands-svg-icons/faPython";
import {faJs} from "@fortawesome/free-brands-svg-icons/faJs";
import {faReact} from "@fortawesome/free-brands-svg-icons/faReact";
import {faCuttlefish} from "@fortawesome/free-brands-svg-icons/faCuttlefish";

// This one is named "rectangle-code"
import {faRectangleCode} from "@fortawesome/free-solid-svg-icons/faRectangleCode";

我收到这个错误：

我无法在名称中使用破折号导入它，那么如何导入这个图标而不出现任何错误？

编辑：单击 here 查看 Font Awesome 网站上的图标

Answer 1

问题来了！

您正在尝试使用专业图标 - 免费图标包中不存在该图标。

（编辑：为了将来参考，调试此类导入问题的一个好方法是在终端的 @fortawesome 目录中 cd，然后使用类似 https://github.com/junegunn/fzf查找您要查找的文件。这就是我在意识到免费版本中不存在该图标之前所做的。）

导入名称中带有破折号（“-”）的 Font Awesome 图标

Importing Font Awesome icons that have a dash ("-") in their name

html

css

font-awesome

reactjs