vite-plugin-svgicons-to-font

A Vite plugin that automatically converts SVG icons to web fonts.

Features

• Automatically convert SVG icon folders to web fonts (including WOFF, WOFF2, TTF, EOT formats)
• Automatically generate corresponding CSS style files
• Support both development server and production build modes
• Real-time monitoring of SVG file changes and font regeneration during development
• IE7 compatibility mode support

Installation

npm install vite-plugin-svgicons-to-font --save-dev

Usage

Configure the plugin in vite.config.js:

import { defineConfig } from 'vite';
import { svgtofont } from 'vite-plugin-svgicons-to-font';
import path from 'path';

export default defineConfig({
  plugins: [
    svgtofont({
      src: path.resolve(__dirname, 'src/assets/icons'),  // SVG icon directory
      fontName: 'iconfont',                              // Font name
      classNamePrefix: 'icon-',                          // CSS class name prefix
      startUnicode: 0xea01,                              // Unicode starting code
    })
  ]
});

Configuration Options

| Option | Type | Description | |------|------|------| | src | string | Required, SVG icon folder path | | fontName | string | Required, font name | | assetFileNames | string | Output filename format, default is "[name]-[hash][extname]" | | ie7 | boolean \| 'conditional' | Whether to generate IE7 compatible CSS | | classNamePrefix | string | CSS class name prefix, defaults to font name | | classNameCommon | string | CSS class name common part | | startUnicode | number | Unicode starting code, default is 0xea01 | | writeImmediate | boolean | Whether to write font files immediately | | svgicons2svgfont | object | svgicons2svgfont configuration options | | svg2ttf | object | svg2ttf configuration options |

How It Works

The plugin monitors SVG file changes in the directory during development mode and generates web fonts and CSS files in real-time. During build, the plugin generates optimized font files and automatically injects CSS links into HTML.

License

MIT