Font Awesome を Webpack で読み込みつつパッケージして利用する

## `font-awesome` package を利用する

https://www.npmjs.com/package/font-awesome

[こちらのサンプル](https://gist.github.com/Turbo87/e8e941e68308d3b40ef6) のように、`css` と `font`ファイルを各種 loader でパッケージしていくのが良さそうです。

## `font-awesome-webpack` package を利用する

https://www.npmjs.com/package/font-awesome-webpack

>Font awesome configuration and loading package for webpack, using font-awesome (Less).

先ほどの [`font-awesome` の利用を前提](https://github.com/gowravshekar/font-awesome-webpack/blob/master/package.json#L31-L33)にしつつ、CSS のローダー設定を package の方で済ませてくれています。

> `extract-text-webpack-plugin` 等を使って CSS ファイルを別にまとめたい場合は `font-awesome.config.js` ファイルを自前で作成することで実現できます。 
https://github.com/gowravshekar/font-awesome-webpack#extract-text-webpack-plugin

Webpack での指定方法も [Usage](https://github.com/gowravshekar/font-awesome-webpack#usage) 通りですね。

# React で利用する場合

普通に `className` に `fa` の指定をしていくのであれば、ここまでの方法で十分です。

## React Components で種類を調べてみる

<img width="938" alt="fontawesome_-_React_Components.png" src="https://qiita-image-store.s3.amazonaws.com/0/904/641099cf-2af9-2589-ce7d-e06306b0a2da.png">

<img width="946" alt="font_awesome_-_React_Components.png" src="https://qiita-image-store.s3.amazonaws.com/0/904/33ca1dd6-34d3-afb0-c8d6-8e5fe2915d82.png">

上記は、基本的に `font-awesome` パッケージなりで `font-awesome` の CSS が読み込まれていることを前提に、そのラッパーコンポーネントとして動作するようです。

`react-fa` だけは、明示的に `font-awesome` パッケージを依存パッケージに指定しています。
ここでは star が一番多かった `react-fa` のみ紹介します。

## `react-fa` package を利用する

https://github.com/andreypopp/react-fa

サンプルの `babel` のバージョンが 5 系なので、6 系だと以下のようになりそうです。

```json:package.json
  "devDependencies": {
    "babel-core": "^6.4.0",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
```

```js
var ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: './index.js',
  output: {
    path: 'assets',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.css(\?.+)?$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      },
      {
        test: /\.(otf|eot|svg|ttf|woff|woff2)(\?.+)?$/,
        loader: 'url'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('bundle.css')
  ]
}
```

> README の方は css 系の loader 用の正規表現が `/\.(css)(\?.+)$/` となっていて、クエリ引数無しの css ファイルにマッチしないので直しています。
https://github.com/andreypopp/react-fa/issues/24 こちらで作者も反応してるので直されるのではないかと。

もちろん、ここまでの例のように `ExtractTextPlugin` を使わずに、すべて `index.js` にまとめることもできますが、`react-fa` のサンプル通りに書いています。

## `grovelabs/react-font-awesome` を利用する

React Components にも同名の package が紹介されていたのですが、こちらは実装が異なります。

`npm install @grove/react-font-awesome --save` でインストールできなかったので実際に試せてはいないのですが、実装が他とは異なっていたので紹介しておきます。

> とうか、Webpack 関係無いので今回の主旨にも沿わないのですが :sweat_smile: 

### 何が違う？

[Prior Art](https://github.com/grovelabs/react-font-awesome#prior-art) に書かれている通りではありますが、この package は他が、CSS や font を loader で別途パッケージ化する必要があるのに対して、`@font-face` の指定から自前でやっているので、これ単体で使いはじめることができます。（font ファイル自体は CDN から読み込むようにしているようです。）

ただ、[こちら](https://github.com/grovelabs/react-font-awesome/blob/master/src/hexCodes.js) に指定されているものしか利用できないように見えるので、font-awesome 本体の方の変更に追随されていないと困りそうですね。

> まあ、`font-awesome` package を使っていても、そこが更新されなければ同じですね。

## サンプル

`font-awesome`, `font-awesome-webpack`, `react-fa` を利用したサンプルを以下に置きました。

https://github.com/dany1468/react_fa_sample

日頃は `sprockets` がやってくれる世界にいて意識しない部分なので、`Webpack` 面白いですね。