web-dev-qa-db-ja.com

Font Awesome 5のアイコンがReactで機能しない（「アイコンが見つかりませんでした」エラー）

私はReactプロジェクトでFont Awesome 5 Pro（ライセンスを持っています）を使用しようとしています、そして [〜＃〜] api [ 〜＃〜] できる限りのことですが、まだ問題が解決していません。

私のプロジェクトでは、npmを使用してfontawesome、fontawesome-common-types、fontawesome-pro-light、fontawesome-pro-regular、fontawesome-pro-solid、react-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にかなり慣れていませんが、私はthinkFontAwesomeのReact APIの指示を正しく実行しました。私が間違っているかもしれないアイデアはありますか？

javascriptreactjsfont-awesome
7
dannymcgee

問題はデフォルトでプレフィックスがfas（Font Awesome Solid）であるためだと思います。

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

fasでcircleアイコンを探していますが、_fontawesome-pro-regular_のfaCircleを使用します

_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

7
Mike Rudge

私はそれを考え出した！

デフォルトでは、FontAwesomeIconコンポーネントは「fas」プレフィックスを使用します（Font Awesome Solidの場合）。上記のエラーコードで確認できます。しかし、/font-awesome-pro-regular/ディレクトリからRegularの重みをロードしようとしました。

次のように、正しい接頭辞を使用するようにFontAwesomeIconコンポーネントを変更しました。

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

そして今、それは期待どおりに動作します。

2
dannymcgee

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 -便利

0
Phillip Thomas