Registry / devops / vite-svg-2-webfont

vite-svg-2-webfont

library7.0.0jsnpmunverified

A Vite plugin that generates webfonts (WOFF2, WOFF, TTF, EOT) from SVG icon files at build time. Current stable version is 7.0.0, released April 2026 with a major breaking change: the internal generator was rewritten from @vusion/webfonts-generator to a native Rust core, changing font binary output and the cssContext callback signature. The plugin exposes a virtual CSS module that can be imported directly into your app, supporting class-based icon usage. It requires Vite ^6.0.0 || ^7.0.0 || ^8.0.0 and Node ^20 || ^22 || >=24. Differentiators: tight Vite integration, zero-config setup, and high-performance Rust-based generation compared to slower Node.js alternatives.

devops

npm install vite-svg-2-webfont

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-SVG-2-WEBFONT

vite-svg-2-webfont

devopsjavascriptv7.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

viteSvgToWebfont

✓ import viteSvgToWebfont from 'vite-svg-2-webfont'

✗ import { viteSvgToWebfont } from 'vite-svg-2-webfont'

Default export only. Named import will fail. ESM-only since v7; no CommonJS exports.

virtual:vite-svg-2-webfont.css

✓ import 'virtual:vite-svg-2-webfont.css'

✗ import style from 'virtual:vite-svg-2-webfont.css'

Virtual module side-effect import; cannot be used as a default import. Only available during build when plugin is active.

ViteSvgToWebfontOptions

✓ import type { ViteSvgToWebfontOptions } from 'vite-svg-2-webfont'

✗ import { ViteSvgToWebfontOptions } from 'vite-svg-2-webfont'

TypeScript type, use 'import type'. Not a runtime value.

require('vite-svg-2-webfont')

✓ import viteSvgToWebfont from 'vite-svg-2-webfont'

✗ const viteSvgToWebfont = require('vite-svg-2-webfont')

Package is ESM-only since v7; require() throws ERR_REQUIRE_ESM.

Configures the plugin to read SVG icons from an 'icons' folder, generates WOFF2/WOFF, and imports the virtual CSS.

// vite.config.ts import { resolve } from 'node:path'; import { defineConfig } from 'vite'; import viteSvgToWebfont from 'vite-svg-2-webfont'; export default defineConfig({ plugins: [ viteSvgToWebfont({ context: resolve(import.meta.dirname, 'icons'), classPrefix: 'icon-', baseSelector: 'icon', formats: ['woff2', 'woff'], }), ], }); // main.ts import 'virtual:vite-svg-2-webfont.css'; // index.html // <i class="icon icon-add"></i>

Debug

Known issues

breakingGenerated font binaries differ at the byte level from v6.

fix

Regenerate fonts after upgrading; font files from v6 are not binary-compatible with v7. Consider versioning font outputs.

affects: >=7.0.0

breakingcssContext callback now receives a single argument; the second `options` and third `handlebars` parameters are removed.

fix

Update custom cssContext callbacks to use the new single-argument signature. See migration guide.

affects: >=7.0.0

breakingPackage is ESM-only since v7; `require()` usage will fail.

fix

Switch to `import` syntax or use dynamic import().

affects: >=7.0.0

deprecatedThe `preloadFormats` option introduced in v6.1.0 may be removed or changed in the future.

fix

Avoid relying on preloadFormats in v6; use explicit <link rel="preload"> instead.

affects: >=6.1.0 <7.0.0

gotchaThe plugin requires Node.js version ^20 || ^22 || >=24. Older versions (e.g., 18, 23) will fail.

fix

Upgrade Node.js to a supported version (20, 22, or 24+).

affects: >=7.0.0

gotchaVirtual CSS module `virtual:vite-svg-2-webfont.css` is only available during build. Importing it outside a Vite context (e.g., in tests) will fail.

fix

Mock the virtual module in test environments using vitest's `vi.mock` or Vite's `resolve.alias`.

affects: >=1.0.0

Errors

Common errors & fixes

Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/vite-svg-2-webfont not supported.

Package is ESM-only since v7, but code uses CommonJS require().

fix

Change to `import viteSvgToWebfont from 'vite-svg-2-webfont'` or use dynamic `import()`.

TypeError: viteSvgToWebfont is not a function

Named import instead of default import.

fix

Use `import viteSvgToWebfont from 'vite-svg-2-webfont'` (without curly braces).

Error: The `cssContext` callback now receives a single argument. The second `options` and third `handlebars` parameters are removed.

Upgraded from v6 to v7 without updating the cssContext callback signature.

fix

Change cssContext from (tpl, options, handlebars) => ... to (singleArg) => ... where singleArg includes tpl.

Error: The font generation failed. 'context' directory does not exist: /path/to/icons

The `context` option points to a non-existent directory.

fix

Ensure the directory exists and the path is correct (use `resolve()` with absolute path).

Upgrade

Version history

7.0.0latest on npm

Audit

Dependencies

viteoptionalPeer dependency required for plugin to function; version must be ^6.0.0, ^7.0.0, or ^8.0.0

webfont-generatorrequiredInternal Rust-based native module used for font generation; bundled but requires Node N-API support

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/atlowChemi/vite-svg-2-webfont ↗

packagehttps://www.npmjs.com/package/vite-svg-2-webfont ↗

homepagehttps://vite-svg-2-webfont.dev ↗