vite-svg-2-webfont

A Vite plugin that generates webfonts from SVG icon files and exposes a virtual stylesheet you can import into your application.

Documentation

Full documentation lives at atlowChemi.github.io/vite-svg-2-webfont.

• Getting Started
• Usage
• Configuration
• Public API

Installation

npm install --save-dev vite-svg-2-webfont

Quick Start

import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import viteSvgToWebfont from 'vite-svg-2-webfont';

export default defineConfig({
    plugins: [
        viteSvgToWebfont({
            context: resolve(__dirname, 'icons'),
        }),
    ],
});

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

<i class="icon icon-add"></i>

In that example, icon-add is controlled by classPrefix and icon is controlled by baseSelector. See the configuration reference and base selector option.