web-dev-qa-db-ja.com

アイコンreact-fontawesomeが見つかりませんでした

Reactにプロジェクトがあり、それにFontAwesomeを統合する必要があります。公式の library を見つけ、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リンクをheadに含めようとしましたが、役に立ちませんでした。 npm v4.6.1;を使用していますnode v8.9.1; react v16.2。

reactjsfont-awesome
24
iamawebgeek

簡単に参照できるように、使用するアイコンを「ライブラリ」に追加する必要があります。

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

32
Shishir

私のような他のバカがいる場合に備えて、アイコンを参照する際に正しい名前を使用していることを確認してください。

持っていた

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」ではなく「user」だけです。

render() {
  return (        
    <FontAwesomeIcon icon="user" />
  );
}
20
J.D. Mallen

faTrashAlt（または同様の名前のアイコン）を表示するときにアイコンが表示されない場合は、実際にアイコンを使用するときに「fa」を削除する必要があるだけでなく、変換する必要がありますcameCaseから「LISP-case」へのアイコン名。

そのため、代替ゴミ箱を読み込んだ後、このようにアイコンを設定できます。

fontawesome.library.add(faTrashAlt);

それはそのように使用されます：

<FontAwesomeIcon icon="trash-alt" />

ちょうど20分の貴重な時間を無駄にしないでください。

4
Thomas

次のようなライブラリなしで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
1
Vladimir Vlasov