Webpack plugin to create iconfont from svgs. Forked from webpack-iconfont-plugin.


4110.1.03 years ago4 years agoMinified + gzip package size for @kuma/webpack-iconfont-plugin in KB



SVG to iconfont conversion plugin for webpack.


  • Supported font formats: WOFF2, WOFF, EOT, TTF and SVG.
  • Semantic: uses Unicode private use area.
  • Cross-browser: IE8+.
  • Generates SCSS file, custom templates possible.


SCSS Styles:

@import 'iconfont.scss';

a.arrow {
  &::before {
    @extend %iconfont;
    content: $iconfont-arrow;

Webpack config:

import IconfontPlugin from 'webpack-iconfont-plugin';
import path from 'path';

export default {
    module: {
        loaders: [
    plugins: [
        new IconfontPlugin({
            svgs: path.resolve(__dirname, '../assets/svg-icons/**/*.svg'),
            fonts: path.resolve(__dirname, '../assets/fonts'),
            styles: path.resolve(__dirname, '../styles/_iconfont.scss')


svgs (required)

Type: String

File path(s) or glob(s) to svg icons.

fonts (required)

Type: String

Destination for generated font files (directory).

styles (required)

Type: String

Destination for generated scss file (file path).


Type: String Default value: /static/fonts/

Path that the generated fonts should be referenced with in the CSS styles.


Type: String Default value: scss

Type of built in style templates ('scss', 'scss-mixins') or path to custom template.


Type: String Default value: iconfont

This dtermines both the font family name (e.g. font-family: 'iconfont', as well as the prefix for scss variables, mixins and classnames (e.g. .iconfont-arrow).


Type: Number Default value: MAX(icons.height)

The outputted font height (defaults to the height of the highest input icon).


Type: Boolean Default value: false

Normalize icons by scaling them all to the height of the highest icon.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.