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

font-awesome package を利用する

こちらのサンプル のように、css と fontファイルを各種 loader でパッケージしていくのが良さそうです。

font-awesome-webpack package を利用する

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

先ほどの font-awesome の利用を前提にしつつ、CSS のローダー設定を package の方で済ませてくれています。

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

Webpack での指定方法も Usage 通りですね。

React で利用する場合

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

React Components で種類を調べてみる

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

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

react-fa package を利用する

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

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",

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 関係無いので今回の主旨にも沿わないのですが

何が違う？

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

ただ、こちら に指定されているものしか利用できないように見えるので、font-awesome 本体の方の変更に追随されていないと困りそうですね。

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

サンプル

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

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