il

iconfont-loader

Webpack loader for icons, converting them into iconfonts.

Showing:

Popularity

Downloads/wk

0

Maintenance

No Maintenance Data Available

Package

Dependencies

5

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial