iconfont-loader

This is a webpack loader for vector icons. It turns your SVG dependencies into an iconfont.

Installation

npm install iconfont-loader

and then add the loader and plugin into your webpack config

var IconFontPlugin = require("iconfont-loader/IconFontPlugin");
 
var webpackConfig = {
    loaders: [{
        test: /\.svg$/,
        loader: "iconfont-loader",
    }],
    plugins: [
        new IconFontPlugin({
            fontName: "myfont",
        }),
    ],
};

Now you can just require the icons in your code:

 
var IconFont = require("iconfont-loader");
var MyIcon = require("./MyIcon.svg");
 
console.log(IconFont); /*
{
    fontName: "myfont",
    css: "@font-face{...}", // the @font-face definition to embed in your stylesheets
}
*/
 
console.log(MyIcon); /*
{
    text: "", // the text to place wherever you want to embed the icon
    fontName: "myfont", // the font-family to be used for the icon to show correctly
}
*/
 

Options

Plugin

See gulp-iconfont docs for options to pass to gulp-iconfont. Here's a list of options used by the plugin itself:

• filenameTemplate The options for naming of the font assets.
• filenameTemplate.name The template to use. See loader-utils docs.
• filenameTemplate.regExp The regexp passed to loader-utils.

Loader

template

The template option of the loader is the template for modules generated by the loader. By default, the template is

module.exports = __ICON__;

where __ICON__ is an object that has the properties fontName (the name of the generated font, passed in the plugin options) and text (a string representation of the character of icon in the font).

This allows you to for example export a React element instead:

var reactIconTemplate = encodeURIComponent(`
module.exports = require("react").createElement("span", {
    className: "icon",
}, __ICON__.text);
`);
 
var webpackConfig = {
    loaders: [{
        test: /\.svg$/,
        loader: "iconfont-loader?template=" + reactIconTemplate,
    }],
    ...
};