Cound не найти иконку react-fontawesome

У меня есть проект React, и мне нужно интегрировать FontAwesome с ним. Я нашел официальную библиотеку и установил ее, как указано в readme

$ 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.

Ответ 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

Ответ 2

На всякий случай, если есть другие идиоты, такие как я, убедитесь, что вы используете правильное имя при ссылке на значки.

я имел

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

fontawesome.library.add(faUser);

а также

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

когда на самом деле фактическое имя значка является просто "пользователем", а не "faUser":

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

Ответ 3

И если вы обнаружите, что не видите свою иконку при попытке отобразить faTrashAlt (или аналогично именованному значку), вам не только нужно удалить "fa", когда на самом деле используете свой значок, но также вы должны преобразовать имя значка из cameCase в " шепелявость случая".

Таким образом, после загрузки альтернативный мусор может выглядеть так:

fontawesome.library.add(faTrashAlt);

Затем он использовал этот способ:

<FontAwesomeIcon icon="trash-alt" />

Просто чтобы вы не потратили 20 драгоценных минут своего времени.