Nostradamus Predicting Maelstroms
    Have ideas to improve npm?Join in the discussion! »

    iconfont-webpack-plugin

    5.0.1 • Public • Published

    Icon Font Webpack Plugin

    npm version Dependency Status CI

    icon font webpack plugin demo
    This plugin tries to keep the usage and maintenance of icon fonts as simple as possible.

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

    Browser Support: IE9+
    Preprocessor Support: All - works with sass, less, stylus, postcss, vanilla css, ...

    Requirements

    This plugin requires:

    • webpack 3.x or higher
    • postcss-loader 2.x or higher
    • css-loader 3.x or higher
    • node 10 or higher

    Installation

    npm i --save-dev postcss-loader webpack css-loader
    npm i --save-dev iconfont-webpack-plugin

    Configuration

    All you have to do is to add the plugin to your postcss loader plugins inside your webpack.config.js:

    const IconfontWebpackPlugin = require('iconfont-webpack-plugin');
    
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: (loader) => {
                    return {
                      plugins: [
                        new IconfontWebpackPlugin({
                          resolve: loader.resolve
                        })
                      ]
                    };
                  }
                }
              }
            ]
          }
        ]
      }

    Advanced Configuration

    Probably you won't need this but you can also pass some additional options.

    Name Type Default Description
    resolve {Function} Required - A function which resolves the svg paths. See resolve
    fontNamePrefix {String} '' Allows to prefix the generated font name
    enforcedSvgHeight {number} 1000 Scales all svg to the given height
    const IconfontWebpackPlugin = require('iconfont-webpack-plugin');
    
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              'css-loader',
              {
                loader: 'postcss-loader',
                postcssOptions: (loader) => {
                  return {
                    plugins: [
                      new IconfontWebpackPlugin({
                        resolve: loader.resolve,
                        fontNamePrefix: 'custom-',
                        enforcedSvgHeight: 3000,
                      })
                    ]
                  };
                }
              }
            ]
          }
        ]
      }

    Usage

    After setting up the plugin your css has now a new feature:
    font-icon declarations

    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;
    }

    Icon sizes

    Shorthand for setting the icon size and the icon:

    a:before {
      font-icon: 80% url('./account.svg');
    }

    SVG Requirements

    The main work of the iconfont-webpack-plugin is done by svg2ttf which converts svgs into fonts.
    Therefore it inherits all its limitations.

    1. Remove all fills and colors. You can probably leave black fills. In fonts, fill is defined by contour direction. Make sure that you don't have any complex rules like evenodd fills.
    2. Remove all FAT line attributes. This is not supported by Fontello. In fonts, fat lines are drown by 2 nested contours.
    3. Join all contours to a single outline. This is the last and the most important step. Usually editors automatically set the correct contour direction depending on nesting and black fills.

    Should you 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 and even GIFs have their use cases.

    Pick the best solution for your problem - there is no silver bullet. With this plugin it is pretty easy to use pixel images, svgs and font-icons side by side.

    When should you use icon fonts over pure SVGs?

    SVGs have some disadvantages and lack certain features especially when used inside pseudo elements:

    What about all the rant on icon fonts?

    Like all technologies there are disadvantages when using icon fonts.
    We tried to apply best practices to solve the main issues for you.

    License

    This project is licensed under MIT.

    Install

    npm i iconfont-webpack-plugin

    DownloadsWeekly Downloads

    5,080

    Version

    5.0.1

    License

    MIT

    Unpacked Size

    32 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar