Иконки Font Awesome 5 не работают с React (ошибка «Не удалось найти значок») - PullRequest
Новая
       9

Иконки Font Awesome 5 не работают с React (ошибка «Не удалось найти значок»)

0 голосов
/ 30 апреля 2018

Я пытаюсь использовать Font Awesome 5 Pro (у меня есть лицензия) в моем проекте React, и я следовал инструкциям API , насколько это было в моих силах, но я ' У меня все еще есть проблемы.

В моем проекте я использовал npm для установки fontawesome, fontawesome-common-types, fontawesome-pro-light, fontawesome-pro -regular, fontawesome-pro-solid и реагировать-fontawesome. Все эти папки находятся в моем каталоге node_modules / @ fortawesome /

В моем App.js у меня есть такой импорт (это не весь файл, а только соответствующие фрагменты): 

import fontawesome from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faSpinnerThird, faCircle} from '@fortawesome/fontawesome-pro-regular/';

fontawesome.library.add(faSpinnerThird, faCircle);

Тогда у меня есть другой компонент, Spinner.js, с этим кодом: 

import React from 'react';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';

const spinner = () => (
    <div className="fa-layers fa-fw">
        <FontAwesomeIcon icon="circle" color="#ddd" />
        <FontAwesomeIcon icon="spinner-third" color="#aaa" spin />
    </div>
);

export default spinner;

В другом компоненте я импортирую компонент Spinner и отображаю его условно, но когда он отображается, я получаю следующие ошибки в консоли браузера: 

Could not find icon
Object { prefix: "fas", iconName: "circle" }

Could not find icon
Object { prefix: "fas", iconName: "spinner-third" }

Я довольно новичок в React, но я думаю Я правильно следовал инструкциям в React API FontAwesome. Есть идеи, где я могу пойти не так?

Ответы [ 3 ]

0 голосов
/ 01 мая 2018

Я понял это!

По умолчанию компонент FontAwesomeIcon использует префикс "fas" (для Font Awesome Solid). Вы можете видеть это в коде ошибки, который я отправил выше. Однако я пытался загрузить Regular weight из каталога /font-awesome-pro-regular/.

Я изменил компоненты FontAwesomeIcon, чтобы использовать правильный префикс, например:

<FontAwesomeIcon icon={["far", "circle"]} color="#ddd" />

И теперь все работает как положено.

0 голосов
/ 01 мая 2018

Я думаю, что проблема в том, что по умолчанию префикс является fas (Font Awesome Solid), поэтому в случае: 

<FontAwesomeIcon icon="circle" color="#ddd" />

он ищет значок circle в панели, однако вы хотите использовать faCircle с fontawesome-pro-regular 

import {faSpinnerThird, faCircle} from '@fortawesome/fontawesome-pro-regular/';

Так что я думаю, что вы хотите написать что-то вроде 

<FontAwesomeIcon icon={["far", "circle"]} color="#ddd" />

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

fontawesome.icon(faPlus).abstract

, который даст вам объект, подобный: 

[{
"tag": "svg",
"attributes": {
  "data-prefix": "fa",
  "data-icon": "user",
  "class": "svg-inline--fa fa-user fa-w-16",
  "role": "img",
  "xmlns": "http://www.w3.org/2000/svg",
  "viewBox": "0 0 512 512"
},
"children": [
  {
    "tag": "path",
    "attributes": {
      "fill": "currentColor",
      "d": "M96…112z"
    }
  }
]
}]

https://fontawesome.com/how-to-use/font-awesome-api

0 голосов
/ 30 апреля 2018

Измените ваши App.js так, чтобы они включали каждый значок отдельно, я думаю, вы, возможно, деконструируете объект Icon. 

import fontawesome from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import faSpinnerThird from '@fortawesome/fontawesome-pro-regular/faSpinnerThird';
import faCircle from '@fortawesome/fontawesome-pro-regular/faCircle';

fontawesome.library.add(faSpinnerThird, faCircle);

Это согласно предложению API здесь: https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

...