Posted at

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

More than 3 years have passed since last update.


font-awesome package を利用する

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

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

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

サンプルの 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 を利用したサンプルを以下に置きました。

https://github.com/dany1468/react_fa_sample

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