ALPHA

This release is rather for feedback purpose than for production usage.

Icon Font Webpack Plugin

This plugin tries to keep the usage and maintainance of icon fonts as simple as possible.

Installation

npm i --save-dev iconfont-webpack-plugin

Configuration

var path = require('path');

var IconfontWebpackPlugin = require('iconfont-webpack-plugin');

  // make sure you use the postcss loader:
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'css-loader!postcss-loader'
      }
    ]
  },
  // add the plugin
  plugins: [
    new IconfontWebpackPlugin()
  ]

Usage

If you set this plugin up properly you can finely use a font-icon declarations in your css/scss/sass/less/...:

a:before {
  font-icon: url('./account.svg');
  transition: 0.5s color;
}

a:hover:before {
  color: red;
}

and it will be compiled into:

@font-face {
  font-family: i96002e;
  src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAA.....IdAA==") format('woff');
}

a:before {
  font-family: i96002e;
  content: '\E000';
  transition: 0.5s color;
}

a:hover:before {
  color: red;
}

Why shouldn't I just use SVGs instead?

SVGs have some disadvantages and lack certain features especially when using inside pseudo elements.

CSS-Transform issues in older Internet Explorer versions
IE9 - IE 10 scaling issues
Fill color doesn't work on background SVG images
Inline SVGs are resolved relative to the page not to the css

Should I use icon fonts for everything?

No.

Icon fonts are really good for decorative icons (where the icon is purely ornamental and doesn’t incorporate core meaning or functionality).

For critical icons without fallbacks (like a hamburger menu icon) you should rather use SVGs. But also JPEGs, PNGs or even GIFs have their use cases.

Pick the best solution for your problem - there is no silver bullet.

License

This project is licensed under MIT.

chastel/iconfont-webpack-plugin