Cound找不到图标反应 - 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链接包含在头部,但它没有帮助.我在用npm v4.6.1; node v8.9.1; react v16.2.

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

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" />
  );
}

事实上,实际的图标名称只是"用户",而不是"faUser":

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

Answer 3

您可以使用没有库的 FontAwesome 图标，如下所示：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

<FontAwesomeIcon icon={faCoffee} />

我已经安装了所有必要的软件包，如react-fontawesome所说：

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome

Answer 4

如果您在尝试显示faTrashAlt（或类似名称的图标）时发现自己没有看到您的图标，那么您不仅需要在实际使用图标时删除“fa”，还必须将图标名称从 cameCase 转换为“口齿不清”。

因此，在以这种方式加载替代垃圾桶图标后：

fontawesome.library.add(faTrashAlt);

然后以这种方式使用：

<FontAwesomeIcon icon="trash-alt" />

只是为了让您不要浪费宝贵的 20 分钟时间。

Answer 5

因为有不止一种方法可以将 fontawesome 图标添加到网站中，所以我将给出一个使用 React 和 fontawesome 以及显式导入的示例。显式导入是节俭的。仅导入 fontawesome 图标集中的确切图标，并将 FontAwesomeIcon 组件图标属性设置为导入的对象而不是名称。

例子：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { faHistory } from '@fortawesome/pro-regular-svg-icons';

function exampleReactComponent() {
   return (
     <div>
       <p><FontAwesomeIcon icon={faCoffee}/></p>
       <p><FontAwesomeIcon icon={faHistory}/></p>
     </div>
   );
}

我不反对按名称设置 FontAwesomeIcon 的图标属性，只是我遇到了有关按名称查找图标的控制台错误，而我发现的解决方案是引用该对象。请注意 icon={} 表示法，因为它与使用带引号的图标名称字符串不同。

显式导入... react-fontawesome npm 包 github 链接

使用 npm 安装... 使用 npm 链接安装 fontawesome

Answer 6

使用这样的数组传递图标路径

图标={['fa', '咖啡']}

您需要将库的所有引用导入到一个文件中，并将该文件导入到 React 应用程序的索引中。

例如，创建名为 fonts.js 的文件

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/pro-solid-svg-icons';
import { far } from '@fortawesome/pro-regular-svg-icons';
import { fal } from '@fortawesome/pro-light-svg-icons';
import { fad } from '@fortawesome/pro-duotone-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);
library.add(fas);
library.add(far);
library.add(fal);
library.add(fad);

现在，在应用程序的 index.js 中导入创建的文件，

import '../configs/fonts.js'

此路径只是一个示例，请确保您输入的是正确的路径。