找不到图标 react-fontawesome

Question

我有一个关于 React 的项目，我需要将 FontAwesome 集成到其中。我找到了官方 库 并按照自述文件中的说明安装了它

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome

当我尝试在我的代码中使用它时：

 <FontAwesomeIcon icon='plus'/>
<FontAwesomeIcon icon={['fa', 'coffee']}/>

我在控制台上收到此错误：

 Could not find icon {prefix: "fas", iconName: "plus"}
Could not find icon {prefix: "fa", iconName: "coffee"}

我试图将 FontAwesome css 链接包含在 head 中，但没有帮助。我正在使用 npm v4.6.1 ； node v8.9.1 ; react v16.2 。

原文由 iamawebgeek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要将您希望使用的任何图标添加到“库”以方便参考。

 import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

fontawesome.library.add(faCheckSquare, faCoffee);

const App = () => (
  <div style={styles}>
    <FontAwesomeIcon icon="check-square" /><br /><br />
    <FontAwesomeIcon icon="coffee" />
  </div>
);

render(<App />, document.getElementById('root'));

在此处查看工作代码： https ://codesandbox.io/s/8y251kv448

另外，请阅读： https ://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

原文由 Shishir 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

以防万一还有像我这样的白痴，请确保在引用图标时使用正确的名称。

我有

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faUser } from "@fortawesome/free-solid-svg-icons";

library.add(faUser);

和

render() {
  return (
    <FontAwesomeIcon icon="faUser" />
  );
}

实际上，实际的图标名称只是“user”，而不是“faUser”：

 render() {
  return (
    <FontAwesomeIcon icon="user" />
  );
}

原文由 J.D. Mallen 发布，翻译遵循 CC BY-SA 4.0 许可协议