A webpack loader to convert svgs into font icons in CSS.
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");
}
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
orafter
) only. We treat these icon fonts as some certain characters under one font-famliy by using their propertycontent
. - Merge duplicated svgs. We will merge those same svgs into only one to keep slim even they lie in different places in your project.
npm install --save-dev icon-font-loader
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()],
};
None.
Name of font family and font files.
- Type:
string
- Default;
icon-font
Path of font and css files relative to webpack output path. Must be a relative path.
- Type:
string
- Default:
./
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
Custom CSS property name
- Type:
string
- Default:
icon-font
Whether to insert @font-face
into the <head>
with a <style>
tag automatically or emit a css file.
- Type:
boolean
- Default: true
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
- Type:
number
- Default:
0xF101
Starting codepoint. Defaults to beginning of unicode private area.
See Releases
See LICENSE