vite-svg-2-webfontGenerate icon webfonts from SVG files in Vite

A Vite plugin that turns SVG icon folders into font assets, CSS classes, and a virtual stylesheet you can import into your app.

Get Started

View on GitHub

Vite-native workflow

Add one plugin to your Vite config, import the virtual stylesheet, and let the plugin generate font assets for your icons.

Flexible output

Generate HTML, CSS, and multiple font formats during development, with support for inline assets and preload hints during build.

Highly configurable

Control file globs, destinations, selectors, class prefixes, codepoints, font formats, template paths, and generator options.

Why this plugin

vite-svg-2-webfont uses @vusion/webfonts-generator under the hood to transform SVG icon sets into webfont files and matching CSS classes. It is designed for projects that want icon fonts integrated directly into the Vite pipeline.

What you get

Generated font files in the formats you choose
A stylesheet that maps SVG file names to icon class names
A virtual module import for bringing the generated CSS into your app
Optional HTML output for previewing generated icons during development

Continue with Getting Started for installation and setup details.