A Webpack loader that generates fonts from your SVG icons and allows you to use your icons in your HTML.

webfonts-loader uses the webfonts-generator plugin to create fonts in any format. It also generates CSS files so that you can use your icons directly in your HTML, using CSS classes.

npm install webfonts-loader

An example of usage can be found in the test/ directory of this repository.

Add this rule to your Webpack config:

{
  test: /\.font\.js/,
  loader: ExtractTextPlugin.extract({
    use: [
      'style-loader',
      'css-loader',
      'webfonts-loader'
    ]
  })
}

So that each font configuration file will be loaded using this rule.

You can provide options objects to configure the loader behaviour:

{
  test: /\.font\.js/,
  loader: ExtractTextPlugin.extract({
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'webfonts-loader',
        options: { ... }
      }
    ]
  })
}

Available options are:

This is the URL prefix for generated links (e.g. /static/ or https://cdn.project.net/). Should typically match Webpack's config.output.publicPath.

If you pass types, fileName or any other font config option, it will be used as a default (unless overriden in font config file).

The config file allows you to specify parameters for the loader to use. Here is an example configuration file:

// myfont.font.js
module.exports = {
  'files': [
    './myfont/*.svg'
  ],
  'fontName': 'myfonticons',
  'classPrefix': 'myfonticon-',
  'baseSelector': '.myfonticon',
  'types': ['eot', 'woff', 'woff2', 'ttf', 'svg'],
  'fileName': 'app.[fontname].[hash].[ext]'
};

Then you have to require the configuration file:

// entry.js
require('./myfont.font');

The loader will then generate:

• CSS with the base and class prefix
• Font files for the SVG icons

The base CSS selector, under which each icon class is to be created. See webfonts-generator#templateoptions

The prefix to be used with each icon class. See webfonts-generator#templateoptions

See webfonts-generator#csstemplate

If true the font is encoded in base64 and embedded inside the @font-face declaration, otherwise font files are written to disk. Default: false

Optional. The length of hash in fileName. Min: 8 Max: 32 Default: 20

The generated font file names. These elements can be used:

• [fontname]: the value of the fontName parameter
• [ext]: the extension of the font file being generated (eot, ...)
• [hash]: the hash of the current compilation
• [chunkhash]: the hash of the SVG files

This option can be also configured globally in the webpack loader options.

See webfonts-generator#files

See webfonts-generator#fontname

See webfonts-generator#formatoptions

See webfonts-generator#rename

See webfonts-generator#types