18
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

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

font-awesome package を利用する

こちらのサンプル のように、cssfontファイルを各種 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 で利用する場合

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

React Components で種類を調べてみる

fontawesome_-_React_Components.png

font_awesome_-_React_Components.png

上記は、基本的に 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 関係無いので今回の主旨にも沿わないのですが :sweat_smile:

何が違う?

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

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

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

サンプル

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
18
Help us understand the problem. What are the problem?