Icon-font-loader NPM

icon-font-loader

A webpack loader to convert svgs into font icons in CSS.

Example

Import svg file with a custom property called icon-font by default where you want to use icon font in CSS:

.select:after {
    icon-font: url('../icons/arrow-down.svg');
    color: #666;
}

Then icon-font-loader will generate corresponding css so web browsers can recognize.

.select:after {
    font-family: 'icon-font';
    font-style: normal;
    font-weight: normal;
    ...
    content: '\f106';
    color: #666;
}

After packing all these imports, the loader will create font files (eot,svg,ttf,woff), and insert a <style> tag into the <head> automatically or emit a CSS file containing @font-face.

@font-face {
    font-family: "icon-font";
    src: url("icon-font.eot?4063944d4c3fb8fa7bf4c19ad0f59965?#iefix") format("embedded-opentype"),
         url("icon-font.woff?4063944d4c3fb8fa7bf4c19ad0f59965") format("woff"),
         url("icon-font.ttf?4063944d4c3fb8fa7bf4c19ad0f59965") format("truetype"),
         url("icon-font.svg?4063944d4c3fb8fa7bf4c19ad0f59965#icon-font") format("svg");
}

Features

Our loader works in a way different to others:

css only. You can override existing style like this:

.select:after {
    icon-font: url('../icons/arrow-down.svg');
    color: #666;
}

.select.up:after {
    icon-font: url('../icons/arrow-up.svg');
}

pseudo elements(before or after) only. We treat these icon fonts as some certain characters under one font-famliy by using their property content.
Merge duplicated svgs. We will merge those same svgs into only one to keep slim even they lie in different places in your project.

Install

npm install --save-dev icon-font-loader

Config

You must import plugin below in webpack in addition to adding custom properties in CSS.

const IconFontPlugin = require('icon-font-loader').Plugin;

module.exports = {
    ...
    module: {
        rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader', 'icon-font-loader'] }],
    },
    plugins: [new IconFontPlugin()],
};

loader options

None.

plugin options

fontName

Name of font family and font files.

Type: string
Default; icon-font

output

Path of font and css files relative to webpack output path. Must be a relative path.

Type: string
Default: ./

localCSSTemplate

Template of virtual property transformed local CSS. It accepts template content instead of a template file path。

Type: string
Default: content of global.css.hbs

property

Custom CSS property name

Type: string
Default: icon-font

auto

Whether to insert @font-face into the <head> with a <style> tag automatically or emit a css file.

Type: boolean
Default: true

mergeDuplicates

Whether to merge duplicated icons in font file. If true, it will shrink font file after built, but this makes compilation slower. Recommand that you enable this option in production mode.

Type: boolean
Default: false