web-dev-qa-db-ja.com

Reactのrender（）にFont Awesomeアイコンを含める方法

Reactのrender()でFont Awesomeアイコンを使用しようとすると、通常のHTMLでは機能しますが、結果のWebページには表示されません。

render: function() {
    return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

以下に実際の例を示します。 http://jsfiddle.net/pLWS3/

障害はどこにありますか？

reactjsfont-awesome
71
user3127060

Reactは、DOMと同様にclassName属性を使用します。

開発ビルドを使用してコンソールを見ると、警告があります。これはjsfiddleで確認できます。

警告：不明なDOMプロパティクラス。 classNameを意味しましたか？

52
Brigand

React JSの新機能で、create-react-app cliコマンドを使用してアプリケーションを作成している場合は、次のNPMコマンドを実行して、 font-awesomeの最新バージョン。

npm install --save font-awesome

font.awesomeをindex.jsファイルにインポートします。以下の行をindex.jsファイルに追加するだけです

import '../node_modules/font-awesome/css/font-awesome.min.css';

または

import 'font-awesome/css/font-awesome.min.css';

属性としてclassNameを使用することを忘れないでください

 render: function() {
    return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
218
Praveen M P

react-fontawesomeアイコンライブラリを使用することもできます。リンクは次のとおりです。 react-fontawesome

NPMページから、npmを介してインストールします。

npm install --save react-fontawesome

モジュールが必要です：

var FontAwesome = require('react-fontawesome');

最後に、<FontAwesome />コンポーネントを使用し、属性を渡してアイコンとスタイルを指定します。

var MyComponent = React.createClass({
  render: function () {
    return (
      <FontAwesome
        className='super-crazy-colors'
        name='rocket'
        size='2x'
        spin
        style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
      />
    );
  }
});

Font.awesome CSSをindex.htmlに追加することを忘れないでください：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

24
Amituuush

https://github.com/FortAwesome/react-fontawesome

fontawesomeおよびreact-fontawesomeのインストール

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid
$ npm i --save @fortawesome/fontawesome-free-regular

あなたのコンポーネントよりも

import React, { Component } from 'react';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>
          <FontAwesomeIcon icon={faCoffee} />
        </h1>
      </div>
    );
  }
}

export default App;
14
Alexander Sidikov Pfeif

最も簡単な解決策は次のとおりです。

インストール：

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

インポート：

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

つかいます：

<FontAwesomeIcon icon={ faThumbsUp }/>
7
Jackkobec

最初にパッケージをインストールする必要があります。

npm install --save react-fontawesome

OR

npm i --save @fortawesome/react-fontawesome

classNameの代わりにclassを使用することを忘れないでください。

後で、使用したいファイルにそれらをインポートする必要があります。

import 'font-awesome/css/font-awesome.min.css'

または

import FontAwesomeIcon from '@fortawesome/react-fontawesome'
4
Karan Patokar

しばらくこれに苦労した後、私はこの手順を思いつきました（Font Awesomeのドキュメント here に基づいて）：

前述のように、fontawesome、react-fontawesomeをインストールする必要がありますおよびfontawesomeアイコンライブラリ：

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

次に、すべてをReactアプリにインポートします。

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

library.add(faStroopwafel)

ここからが難しい部分です。

アイコンを変更または追加するには、ノードモジュールライブラリで使用可能なアイコンを見つける必要があります。

<your_project_path>\node_modules\@fortawesome\free-solid-svg-icons

各アイコンには2つの関連ファイル：.jsおよび.d.tsがあり、ファイル名はインポートフレーズを示します（かなり明白です...）ので、angry、gemおよびcheck-markアイコンは次のようになります。

import { faStroopwafel, faAngry, faGem, faCheckCircle } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel, faAngry, faGem, faCheckCircle)

React jsコードでアイコンを使用するには、次を使用します。

<FontAwesomeIcon icon=icon_name/>

アイコン名は、関連するアイコンの.jsファイルにあります。

例えばforfaCheckCircle内部を見るfaCheckCircle.jsfor 'iconName '変数：

...
var iconName = 'check-circle'; 
...

Reactコードは次のようになります。

<FontAwesomeIcon icon=check-circle/>

がんばろう！

4
Naor Bar

上記からのアレクサンダーの答えは本当に助けになりました！

ReactJSで作成したアプリのフッターにソーシャルアカウントアイコンを取得して、ホバー状態を簡単に追加し、ソーシャルアカウントをリンクできるようにしました。これは私がやらなければならなかったことです：

$ npm i --save @fortawesome/fontawesome-free-brands

次に、フッターコンポーネントの上部にこれを含めました。

import React from 'react';
import './styles/Footer.css';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faTwitter, faLinkedin, faGithub} from '@fortawesome/fontawesome-free-brands';

コンポーネントは次のようになりました。

<a href='https://github.com/yourusernamehere'>
  <FontAwesomeIcon className ='font-awesome' icon={faGithub} />
</a>

魅力のように働いた。

3
Emily Kuckelman

私はこのケースを経験しました。本番環境で完全に動作する反応/再構築サイトが必要です。

しかし、「厳格モード」がありました。これらのコマンドでそれを昼食してはいけません。

yarn global add serve
serve -s build

Build/index.htmlファイルをクリックするだけで作業する必要があります。 fontawesomeとnpm font-awesomeを併用すると、開発モードで動作していましたが、「厳格モード」では動作していませんでした。

ここに私の解決策があります：

public/css/font-awesome.min.css
public/fonts/font-awesome.eot 
*** other different types of files(4) ***
*** I copied these files for node_module/font-awesome ***
*** after copied then can delete the font-awesome from package.json ***

public/index.htmlに

<link rel="stylesheet" href="%PUBLIC_URL%/css/font-awesome.min.css">

上記のすべてのステップの後、fontawesomeはうまく動作します!!!

2
smartworld-dm

「Praveen M P」が言ったように、font-awesomeをパッケージとしてインストールできます。糸がある場合は、次を実行できます。

 yarn add font-awesome

あなたが糸を持っていない場合、プラヴィーンが言ったようにしてください：

npm install --save font-awesome

これにより、パッケージがプロジェクトの依存関係に追加され、node_modulesフォルダーにパッケージがインストールされます。 App.jsファイルに追加します

import 'font-awesome/css/font-awesome.min.css'
1
Jack Gerrard

チェックアウト 反応アイコン かなりドープで、うまく機能しました。

0
theterminalguy