はじめに

ReactでFont Awesomeをscssで使おうとして、
上手くいかなくて調べていたら、すごくお手軽簡単な方法にたどり着いたので、
今更感がありそうですが、共有します。

Font Awesome?

ざっくり言うとWebページで、
アイコンフォントが使えるようになるCSSフレームワークです。
例えばSNSのアイコンなんかを画像で用意しなくても使えるので、
お手軽で軽量です。
無料と有料があり、有料だと使えるアイコンの数が増えます。

環境

windows10
Node.js v8.12
React.js v16.8.6

前提

• 今回Font Awesome自体の使い方は記載しません
• この方法ではFont Awesomeバージョン4になります
• バージョン5以降を使いたい場合は、公式からDLして設置します
• react専用のnpmパッケージもありますが、今回はふれません（あまりロックインしたくないので）
• 今回のnpmは3年更新されてないようです。そこは気がかり
• とは言え、週間60万もDLされてるのでメジャー且つ人気っぽいです(2019.6.7現在)

Font Awesome公式はこちら
基本的な使い方はこちら
具体的な使い方はこちら
npmはこちら
React専用はこちら

準備

適当にReactのプロジェクトを作ります。

$ create-react-app fontawesome-hello

※後述のサンプルは、余計なコードを消していますが、
これで作られたコードにそのまま記述しても使えます。

インストール

$ npm install --save font-awesome

コード書き換え

index.js

一番TOPのコンポーネントです。
ここに先ほどインストールしたcssを読み込みます。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

// ★これを追加するだけ
import 'font-awesome/css/font-awesome.min.css'; 


ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

App.js

実際にfont Awesomeを利用するコンポーネントです。
公式の使い方の通り、classに設定して利用します。

import React, { Component } from 'react';

// 別にクラスでなくても良い
class App extends Component {
  constructor(props) {
    super(props);
  }

//★ <i className="fa fa-thumbs-up">でグッドアイコンが表示される

  render() {
    return (
      <div>
        hello font awesome<i className="fa fa-thumbs-up"></i>
      </div>
    );
  }

//アイコンだけだとなんとなく寂しかったので文字も出しているが、今回の話と関係ない

}

export default App;

実行結果

一番右にグッドアイコンが出てますね。
成功です！

所感

過去にいろいろ試して四苦八苦したのですが、
1コマンドで用意できてしまうのはすごく楽ですね。
この感じならAnguraやVue.jsでも使えそうですし、
node.jsのサーバサイドレンダリングでもいけそうですね！
（試してませんが）

参考

Get Sass and Font Awesome up and running on your Create React App in 5 minutes