# vite-svg-2-webfont

> Generate 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.

## Table of Contents

### Vite Plugin

- [Getting Started](/vite-svg-2-webfont/getting-started.md): Install vite-svg-2-webfont and add it to your Vite app with the default virtual stylesheet workflow.
- [Usage](/vite-svg-2-webfont/usage.md): Learn the standard integration flow for vite-svg-2-webfont, including plugin setup, virtual CSS import, and generated icon classes.
- [Examples](/vite-svg-2-webfont/examples.md): Live vite-svg-2-webfont examples — each shows the Vite config, the input icons, any templates, and the font it generates.
- [How It Works](/vite-svg-2-webfont/how-it-works.md): How vite-svg-2-webfont generates, serves, and bundles icon fonts — what happens in development vs build, how options change that, and how the output cache works.
- [Configuration](/vite-svg-2-webfont/configuration.md): Reference for all vite-svg-2-webfont options, including file discovery, output paths, codepoints, preload behavior, and font generation controls.
- [Public API](/vite-svg-2-webfont/public-api.md): Reference for the inter-plugin public API exposed by vite-svg-2-webfont.
- [Migration](/vite-svg-2-webfont/migration.md): Upgrade vite-svg-2-webfont across major versions — what changes, who needs to act, and step-by-step before/after examples.

### Guides

- [Which Package Do I Need?](/vite-svg-2-webfont/which-package.md): Choose between the Vite plugin, the Node.js package, the browser package, the Rust crate, and the CLI — and decide whether an icon font is the right fit at all.
- [SVG Authoring & Troubleshooting](/vite-svg-2-webfont/svg-authoring.md): Prepare SVG icons for webfont generation and fix common problems — backgrounds, holes, clip paths, text, artboards, alignment, precision, file names, and codepoints — with live before/after fonts.
- [Glossary](/vite-svg-2-webfont/glossary.md): Definitions of the terms used across the vite-svg-2-webfont and webfont-generator docs.

### Webfont Generator

- [Webfont Generator](/vite-svg-2-webfont/webfont-generator.md): Overview of webfont-generator, the Rust engine behind vite-svg-2-webfont, available as a Rust crate, CLI, Node.js package, and browser package.
- [Node.js Usage](/vite-svg-2-webfont/webfont-generator/node.md): API reference for the @atlowchemi/webfont-generator npm package, including installation, options, result type, and templates.
- [Rust Usage](/vite-svg-2-webfont/webfont-generator/rust.md): API reference for the webfont-generator Rust crate, including async and sync APIs, types, and examples.
- [Browser API](/vite-svg-2-webfont/webfont-generator/browser.md): Browser font generation with precompiled WebAssembly and a worker-owned in-memory API.
- [CLI Usage](/vite-svg-2-webfont/webfont-generator/cli.md): CLI reference for the webfont-generator command-line tool, including installation, usage examples, and all options.
- [Templates](/vite-svg-2-webfont/webfont-generator/templates.md): Shared reference for generated CSS, HTML previews, Handlebars template context, and the SCSS icon mixin.
- [Under the Hood](/vite-svg-2-webfont/webfont-generator/under-the-hood.md): How the webfont-generator engine is built — pipeline architecture, adapters, and benchmark results.
- [npm Adapter Changelog](/vite-svg-2-webfont/webfont-generator/changelog.md): Release history for @atlowchemi/webfont-generator.
- [Rust Engine Changelog](/vite-svg-2-webfont/webfont-generator/engine-changelog.md): Release history for the webfont-generator Rust engine and CLI.

### Guides

- [Which Package Do I Need?](/vite-svg-2-webfont/which-package.md): Choose between the Vite plugin, the Node.js package, the browser package, the Rust crate, and the CLI — and decide whether an icon font is the right fit at all.
- [SVG Authoring & Troubleshooting](/vite-svg-2-webfont/svg-authoring.md): Prepare SVG icons for webfont generation and fix common problems — backgrounds, holes, clip paths, text, artboards, alignment, precision, file names, and codepoints — with live before/after fonts.
- [Glossary](/vite-svg-2-webfont/glossary.md): Definitions of the terms used across the vite-svg-2-webfont and webfont-generator docs.

### Other

- [Changelog](/vite-svg-2-webfont/changelog.md): Release history for the vite-svg-2-webfont Vite plugin.
- [Playground](/vite-svg-2-webfont/playground.md): Turn SVG icons into a webfont in your browser — tweak every option, preview the result, and download fonts, CSS, and HTML.