找不到图标 react-fontawesome

Question

I have a project on React and I need to integrate FontAwesome to it. I found official library and installed it as instructed in readme

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

When I try to use it in my code like this:

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

I am getting this error on the console:

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

I tried to include FontAwesome css link to head but it didn't help. I am using npm v4.6.1 ; node v8.9.1 ; react v16.2 .

Answer 1

You need to add any icons you wish to use, to a "library" for easy reference.

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'));

Check out working code here: https://codesandbox.io/s/8y251kv448

Also, read this: https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

Answer 2

Just in case there are other idiots out there like me, make sure that you use the right name in referencing the icons.

I had

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

library.add(faUser);

and

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

when, in fact, the actual icon name is just "user", not "faUser":

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

Answer 3

You can use FontAwesome icons without library like this:

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

<FontAwesomeIcon icon={faCoffee} />

I've installed all the necessary packages as react-fontawesome says:

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

Answer 4

And if you find yourself not seeing your icon when trying to display faTrashAlt (or similarly named icon), not only do you have to remove the 'fa' when actually using your icon but also you have to convert the icon name from cameCase to "lisp-case".

So, after loading the alternative trash can icon this way:

fontawesome.library.add(faTrashAlt);

It's then used that way:

<FontAwesomeIcon icon="trash-alt" />

Just so you don't waste 20 precious minutes of your time.

Answer 5

Just because there is more than one way to get a fontawesome icon into a website, I'll give an example with react and fontawesome and explicit import. Explicit import is frugal. Only the exact icon from the fontawesome icon set is imported and the FontAwesomeIcon component icon attribute is set to the imported object instead of the name.

Example:

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

I don't disagree with setting the icon attribute of the FontAwesomeIcon by name it's just that I encountered console errors about finding icons by name and the resolution I discovered is to reference the object. Note the icon={} notation because it is different than using a quoted string of the icon name.

Explicit Import... react-fontawesome npm package github link

Installing with npm... installing fontawesome with npm link

Answer 6

To pass the icon path using an array like this

icon={['fa', 'coffee']}

You'll need to import all references of the library in a file and import this file in the index of your React app.

Example, create the file named 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);

Now in the index.js of your app import the file that was created,

import '../configs/fonts.js'

This path is just an example, be sure that you are putting the right one.

Answer 7

For free solid only

// Fontawesome
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas);
...