vite-svg-2-webfont

Appearance

Configuration ​

The plugin API consists of one required option and multiple optional options for controlling file discovery, font generation, CSS generation, output paths, and build-time behavior.

context ​

  • Required
  • Type: string
  • Description: A path that resolves to a directory in which the glob pattern for matching SVG files runs. Matching SVG files are used to generate the icon font.

files ​

  • Type: string | string[]
  • Description: Glob or array of globs for SVG files inside context.
  • Default: ['*.svg']

fontName ​

  • Type: string
  • Description: Name of the generated font and base name of font files
  • Default: 'iconfont'

dest ​

cssDest ​

cssTemplate ​

cssContext ​

  • Type: (context: CssContext) => void
  • Description: Hook for mutating the rendering context passed to the CSS template before the CSS file is generated. The context argument carries the named fields documented on CssContext (fontName, src, codepoints) plus the baseSelector and classPrefix keys the plugin forwards to the underlying generator.
  • Reference: @atlowchemi/webfont-generator#cssContext

cssFontsUrl ​

  • Type: string
  • Description: Fonts path used in the generated CSS file
  • Default: value derived from cssDest

htmlDest ​

htmlTemplate ​

ligature ​

normalize ​

round ​

descent ​

fixedWidth ​

fontHeight ​

centerHorizontally ​

centerVertically ​

  • Type: boolean
  • Description: Center glyphs vertically based on their bounds
  • Default: false
  • Notes:
    • This option is a convenience alias for formatOptions.svg.centerVertically
    • If both centerVertically and formatOptions.svg.centerVertically are defined, formatOptions.svg.centerVertically takes precedence
    • Any other properties inside formatOptions.svg are preserved
  • Reference: @atlowchemi/webfont-generator#centerVertically

optimizeOutput ​

  • Type: boolean
  • Description: Run an SVG path optimizer over each glyph before assembling the font, trading a small amount of build time for smaller output bytes
  • Default: false
  • Notes:
    • Available since v7 — exposes the underlying @atlowchemi/webfont-generator#optimizeOutput option through the plugin
    • Convenience alias for formatOptions.svg.optimizeOutput; the format-level option takes precedence when both are set

generateFiles ​

  • Type: boolean | string | string[]
  • Description: Controls which generated files are written to disk during development
  • Valid values:
    • true for all generated file types
    • false for no generated files
    • 'html'
    • 'css'
    • 'fonts'
  • Default: false

types ​

  • Type: string | string[]
  • Description: Font file types to generate
  • Supported values:
    • svg
    • ttf
    • woff
    • woff2
    • eot
  • Default: ['eot', 'woff', 'woff2', 'ttf', 'svg']
  • Reference: @atlowchemi/webfont-generator#types

preloadFormats ​

  • Type: string | string[]
  • Description: Font formats to preload in production HTML output
  • Notes:
    • Only affects build HTML output
    • Values outside types are ignored
    • No preload tags are injected when inline is true
vite.config.ts
ts
viteSvgToWebfont({
    context: './src/icons',
    types: ['woff2', 'ttf'],
    preloadFormats: ['woff2'],
});

shouldProcessHtml ​

  • Type: (context: IndexHtmlTransformContext) => boolean
  • Description: Conditionally skip preload injection for selected HTML entrypoints (See preloadFormats for preload injection controls)
  • Notes:
    • Only affects preload injection
    • Returning false skips preload tag injection for the current HTML file
vite.config.ts
ts
import { resolve as pathResolve } from 'node:path';

viteSvgToWebfont({
    context: './src/icons',
    preloadFormats: ['woff2'],
    shouldProcessHtml: context => context.filename === pathResolve(import.meta.dirname, 'src', 'index.html'),
});

codepoints ​

  • Type: { [key: string]: number }
  • Description: Explicit codepoints for selected icons. Icons without assigned codepoints continue from the generator start codepoint while avoiding duplicates.
  • Reference: @atlowchemi/webfont-generator#codepoints

classPrefix ​

baseSelector ​

formatOptions ​

moduleId ​

  • Type: string
  • Description: Virtual module id used when importing generated plugin artifacts
  • Default: 'vite-svg-2-webfont.css'

With the default value, import the module like this:

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

inline ​

  • Type: boolean
  • Description: Inline font assets inside CSS using base64 encoding
  • Default: false

allowWriteFilesInBuild ​

  • Type: boolean
  • Description: Allow HTML, CSS, and font files to be written during build
  • Default: false
  • Reference: issue discussion

Released under the MIT License.

Copyright © Chemi Atlow