Security News
Another Round of TEA Protocol Spam Floods npm, But It’s Not a Worm
Recent coverage mislabels the latest TEA protocol spam as a worm. Here’s what’s actually happening.
By Philipp Burckhardt - Nov 14, 2025
@simonbackx/icon-font-loader
Advanced tools
icon-font-loader
A webpack loader to convert svgs into font icons in CSS.
Example
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 (woff2,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.woff2?4063944d4c3fb8fa7bf4c19ad0f59965") format("woff2"),
url("icon-font.woff?4063944d4c3fb8fa7bf4c19ad0f59965") format("woff"),
url("icon-font.ttf?4063944d4c3fb8fa7bf4c19ad0f59965") format("truetype"),
url("icon-font.svg?4063944d4c3fb8fa7bf4c19ad0f59965#icon-font") format("svg");
}
Well, if dataURL option enabled, the result is:
@font-face {
font-family: "icon-font";
src:url("data:application/x-font-woff;base64,d09GRgABAAAAAAUkAAsAAAAACQgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAAHcAAAC4Ifsmu09TLzIAAAGAAAAAPQAAAFZWTEunY21hcAAAAcAAAADxAAACuqtTRqJnbHlmAAACtAAAAEIAAABwWoXqgmhlYBewAAA=") format("woff");
}
Features
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(
beforeorafter) only. We treat these icon fonts as some certain characters under one font-family 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.
Install
yarn add @simonbackx/icon-font-loader --dev
npm install --save-dev @simonbackx/icon-font-loader
Config
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()],
};
Loader options
None.
Plugin options
fontName
Name of font family and font files.
- Type:
string - Default:
'icon-font'
filename
Output filename format like output.filename of Webpack. The following tokens will be replaced:
-
[ext]the extension of the resource -
[name]the font name -
[fontName]the font name, alias of[name] -
[hash]the hash of svg file (Buffer) (by default it's the hex digest of the md5 hash, and all file will use hash of the svg file) -
[<hashType>:hash:<digestType>:<length>]optionally one can configure- other
hashTypes, i. e.sha1,md5,sha256,sha512 - other
digestTypes, i. e.hex,base26,base32,base36,base49,base52,base58,base62,base64 - and
lengththe length in chars
- other
-
Type:
string -
Default:
'[name].[ext]?[hash]'
output
Output path of emitted font and css files, relative to webpack output path. Must be a relative path.
- Type:
string - Default:
'./'
publicPath
Font public path in css url, same as webpack output.publicPath. This option is for overriding it.
- Type:
string - Default:
''
localCSSTemplate
Template of virtual property transformed local CSS. It accepts template content instead of a template file path。
If set empty, local CSS won't be generated.
- Type:
string - Default: content of global.css.hbs
For example, this template generate content inside the following rule:
.icon-1::before, .icon-2::before .icon-3::before {
font-family: '{{ fontName }}';
font-style: normal;
font-weight: normal;
font-variant: normal;
text-decoration: inherit;
text-rendering: optimizeLegibility;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
localCSSSelector
Font selector of local CSS defaults to selectors concatenation of all icons in a file.
If set this option, selector will be specified as the value.
- Type:
string - Default:
''
For example, if set this option '.my-icon', local CSS will be like this:
.my-icon {
font-family: '{{ fontName }}';
font-style: normal;
font-weight: normal;
font-variant: normal;
text-decoration: inherit;
text-rendering: optimizeLegibility;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
property
Custom CSS property name.
- Type:
string - Default:
'icon-font'
auto
Whether to insert @font-face css in each chunks automatically, or emit a separated css file.
- Type:
boolean - Default:
true
dataURL
If true, fonts will be converted into data base64 format embedded in css, instead of emitted as font files.
It's recommanded if there are not many icons because font files need extra requests.
- Type:
boolean - Default:
false
startCodepoint
Starting codepoint. Defaults to beginning of unicode private area.
- Type:
number - Default:
0xF101
fontOptions
Options that are passed directly to svgicons2svgfont.
The descent option is set by default so that for most icons no extra vertical-align style needs to be added. It's a best practice.
- Type:
Object - Default:
{ fontHeight: 1000, descent: 140, centerHorizontally: true, }
entries
Specify the entry that needs to be automatically inserted. If not specified or an empty array, styles will be inserted for all entries
- Type:
Array - Default:
undefined
Changelog
See Releases
Contributing
License
FAQs
A webpack loader to convert svgs into font icons in CSS
We found that @simonbackx/icon-font-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 26 Jul 2020
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
PyPI Expands Trusted Publishing to GitLab Self-Managed as Adoption Passes 25 Percent
PyPI adds Trusted Publishing support for GitLab Self-Managed as adoption reaches 25% of uploads
By Sarah Gooding - Nov 14, 2025
Research
/Security News
Malicious Chrome Extension Exfiltrates Seed Phrases, Enabling Wallet Takeover
A malicious Chrome extension posing as an Ethereum wallet steals seed phrases by encoding them into Sui transactions, enabling full wallet takeover.
By Kirill Boychenko - Nov 12, 2025