Question

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

$ 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

您需要将任何想要使用的图标添加到＆＃34;库＆＃34;方便参考。

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

如果在尝试显示 faTrashAlt （或类似名称的图标）时发现自己看不到图标，则不仅在实际使用图标时必须删除“ fa”，而且必须将图标名称从cameCase转换为“ lisp-case”。

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

fontawesome.library.add(faTrashAlt);

然后使用这种方式：

<FontAwesomeIcon icon="trash-alt" />

那样您就不会浪费20分钟的宝贵时间。

Answer 4

仅因为有多种方法可以将Fontawesome图标导入网站，所以我将举一个带有react和fontawesome和显式导入的示例。显式导入是节俭的。仅导入fontawesome图标集中的确切图标，并且FontAwesomeIcon组件的icon属性设置为导入的对象，而不是名称。

示例：

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属性，只是我遇到了有关按名称查找图标的控制台错误，并且发现的分辨率是引用该对象。请注意icon = {}表示法，因为它与使用带引号的图标名字符串不同。

显式导入... react-fontawesome npm package github link

使用npm安装... installing fontawesome with npm link

Answer 5

您可以像这样使用不带库的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

Cound找不到icon react-fontawesome

5 个答案: