Numerous Problems Multiplied

    iconfont-loader

    0.0.1 • Public • Published

    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,
        }],
        ...
    };

    Install

    npm i iconfont-loader

    DownloadsWeekly Downloads

    0

    Version

    0.0.1

    License

    ISC

    Last publish

    Collaborators

    • jussi-kalliokoski