webfonts-loader

webfonts-loader is a Webpack loader that generates icon fonts (EOT, WOFF2, WOFF, TTF, SVG) directly from a folder of SVG files, using @vusion/webfonts-generator under the hood, and emits the CSS (or SCSS) needed to reference the resulting glyphs via class names. Font generation configuration lives in a small JS or JSON file that Webpack picks up through a custom loader rule, so icon fonts become part of the normal build pipeline instead of a separate manual step.

Beyond the base font-plus-CSS output, it supports embedding fonts as base64 data URIs, emitting an HTML preview page, and exporting the generated Unicode codepoints as JSON, CommonJS, or browser-global files so codepoints can be reused elsewhere in an app, for example driving JS-based icon rendering.

What You Get

• Generated icon font in EOT, WOFF2, WOFF, TTF, and SVG formats from a folder of SVG files
• Auto-generated CSS (or SCSS) exposing each icon as a class under a configurable base selector and prefix
• Optional base64-embedded fonts via the embed option, avoiding extra font-file requests
• Optional HTML preview page listing every generated icon class
• Codepoint export (JSON, CommonJS, or browser-global JS) for referencing icons from application code
• Hash-based cache-busting filenames via [hash]/[chunkhash] tokens

Common Use Cases

• Compiling a shared SVG icon set into a versioned icon font as part of CI/CD
• Providing legacy-browser font fallbacks (EOT/TTF/WOFF) alongside modern formats
• Inlining icon fonts as base64 for offline-first or request-constrained apps
• Exporting codepoints so JavaScript can render icons dynamically by name

Under The Hood

Architecture The loader is a single exported Webpack loader function (index.js) that parses the font-config file (a JS module executed via Node’s Module._compile, or plain JSON), resolves file globs into absolute SVG paths via utils.js and glob, and builds a generatorOptions object translating the rich font-config surface into the @vusion/webfonts-generator API before calling it asynchronously. Results are emitted through Webpack’s loader context (this.emitFile, this.async, this.addDependency) as font buffers per format, an optional base64-encoded data URI, an optional HTML preview via generateHtml, and CSS returned to the loader callback via generateCss. A separate small module (emit-codepoints.js) handles the optional codepoint-export feature, reusing hashFiles from utils.js. There’s no class-based structure or abstraction layer isolating the generator call — the whole feature set (embedding, HTML, codepoints, SCSS) branches through one function via option checks, so a change to the core generator dependency would ripple through most of index.js.

Tech Stack Plain CommonJS Node.js, no TypeScript, published as source with no build step. Runtime dependencies are @vusion/webfonts-generator (the actual SVG-to-font conversion engine), glob for resolving SVG file patterns, and loader-utils for Webpack option parsing and filename interpolation. Dev tooling includes semistandard (a Standard-based ESLint config) for style enforcement and snyk, wired into a postinstall snyk-protect step with an accompanying .snyk policy file. Tests run via ava, invoked through shell scripts (runTest.sh/runTestEmbed.sh) that build real sample Webpack projects under test/ and test-embed/. CI (GitHub Actions, Node 16) runs npm test plus CodeQL, OSSAR static analysis, and a dependency-review workflow.

Code Quality Tests exist, but the npm test script mostly runs semistandard lint plus two shell scripts that exercise the loader end-to-end by building sample Webpack projects against real SVGs, rather than isolated unit tests of index.js itself; the only pure ava assertions found (test/ava.js) cover the internal hashFiles utility, not the loader’s option-handling logic. Error handling is minimal — webfontsGenerator errors are forwarded to the Webpack callback unwrapped, and the fallback JS-config-file execution path (Module._compile) has no surrounding try/catch, so a malformed config would throw uncaught. Naming is consistent camelCase and semistandard is enforced in CI, but the code is untyped, pre-ES6-style JavaScript (var declarations throughout) with no coverage reporting.

What Makes It Unique Its specific niche is treating icon-font generation as a first-class Webpack build step driven by a config file that is genuinely executed as a Node module (not just parsed as static JSON), letting users embed real functions for options like rename, cssContext, and htmlContext directly in their font config. The codepoint-export feature (JSON/CommonJS/web-global formats) is a useful nicety for apps that render icons dynamically by name. That said, the actual SVG-to-font conversion work is entirely delegated to the @vusion/webfonts-generator dependency — this package’s contribution is the Webpack-loader integration and config plumbing on top, not novel font-generation technology.