icon-font-loader

Import svg files through a virtual property icon-font in CSS. And generate icon fonts after collecting all svgs.

This could be seen as an equivalent substitution from characters to font icons.

Example

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

will be transformed to the following codes by icon-font-loader

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

(eot,svg,ttf,woff) fonts and a global @font-face file will be generated after collecting all svgs.

Install

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

Config

This loader is against CSS files while a Plugin is required to collect svgs and generate font icons.

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

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

This plugin will insert a <style> tag in your document head to import and define the icon font.

@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");
}

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.

• Type: string
• Default: ./

localCSSTemplate

Template of virtual property transformed local CSS.

• Type: string
• Default: global.css.hbs

globalCSSTemplate

Template of global CSS containing @font-face.

• Type: string
• Default: local.css.hbs