A vite plugin which generates a webfont out of svg icons
npm install vite-svg-2-webfont
!GitHub Actions Workflow Status





A Vite Plugin that generates fonts from your SVG icons and allows you to use your icons in your HTML.
vite-svg-2-webfont uses the webfonts-generator package to create fonts in any format.
It also generates CSS files so that you can use your icons directly in your HTML, using CSS classes.
#### NPM
```
npm i -D vite-svg-2-webfont
#### YARN
``
yarn add -D vite-svg-2-webfont
#### PNPM
``
pnpm add -D vite-svg-2-webfont
Add the plugin to the vite.config.ts with the wanted setup, and import the virtual module, to inject the icons CSS font to the bundle.
Add the plugin to your vite configs plugin array.
`typescript
// vite.config.ts
import { resolve } from 'path';
import { defineConfig } from 'vite';
import viteSvgToWebfont from 'vite-svg-2-webfont';
export default defineConfig({
plugins: [
viteSvgToWebfont({
context: resolve(__dirname, 'icons'),
}),
],
});
`
Import the virtual module into the app
`typescript`
// main.ts
import 'virtual:vite-svg-2-webfont.css';
Use the font in templates with the icon font class and an icon class name.
The default font class name is .icon and can be overriden by passing the baseSelector configuration option..svg
Icon class names are derived from their file name, and prefixed with the value of classPrefix which defaults to icon-.
In the below example, the add class would display the icon created from the file {context}/add.svg
`html`
The plugin has an API consisting of one required parameter and multiple optional parameters allowing to fully customize plugin setup.
- required
- type: stringsvg
- description: A path that resolves to a directory, in which a glob pattern to find files will execute. The SVG files will be used to generate the icon font.
- type: string['*.svg']
- description: An array of globs, of the SVG files to add into the webfont, from within the context
- default
- type: string'iconfont'
- description: Name of font and base name of font files.
- default
- type: stringpath.resolve(context, '..', 'artifacts')
- description: Directory for generated font files.
- default
- See webfonts-generator#dest
- type: stringpath.join(dest, fontName + '.css')
- description: Path for generated CSS file.
- default
- See webfonts-generator#cssdest
- type: stringtemplateOptions
- description: Path of custom CSS template. Generator uses handlebars templates. Tht template receives options from along with the following options:string
- fontName
- src – Value of the src property for @font-face.object
- codepoints - Codepoints of icons in hex format.
- Paths of default templates are stored in the webfontsGenerator.templates object.webfontsGenerator.templates.css
- – Default CSS template path. It generates classes with names based on values from options.templateOptions.webfontsGenerator.templates.scss
- – Default SCSS template path. It generates mixin webfont-icon to add icon styles. It is safe to use multiple generated files with mixins together.
- See webfonts-generator#csstemplate
- See webfonts-generator#cssContext
- type: stringcssDest
- description: Fonts path used in CSS file.
- default
- type: stringpath.join(dest, fontName + '.html')
- description: Path for generated HTML file.
- default
- See webfonts-generator#htmldest
- type: stringoptions.templateOptions
- description: HTML template path. Generator uses handlebars templates. Template receives options from along with the following options:string
- fontName
- styles – Styles generated with default CSS template. (cssFontsPath is changed to relative path from htmlDest to dest)string[]
- names – Names of icons.
- See webfonts-generator#htmltemplate
- type: booleantrue
- description: Enable or disable ligature function.
- default
- See webfonts-generator#ligature
- type: booleanfalse
- description: Normalize icons by scaling them to the height of the highest icon.
- default
- See svgicons2svgfont#optionsnormalize
- type: number10e12
- description: Setup SVG path rounding.
- default
- See svgicons2svgfont#optionsround
- type: number0
- description: The font descent. It is useful to fix the font baseline yourself.
- default
- See svgicons2svgfont#optionsdescent
- type: booleanfalse
- description: Creates a monospace font of the width of the largest input icon.
- default
- See svgicons2svgfont#optionsfixedwidth
- type: number
- description: The outputted font height (defaults to the height of the highest input icon).
- See svgicons2svgfont#optionsfontheight
- type: booleanfalse
- description: Calculate the bounds of a glyph and center it horizontally.
- default
- See svgicons2svgfont#optionscenterhorizontally
- type: boolean | string | string[]true
- description: Sets the type of files to be saved to system during development.
- valid inputs:
- Generate all file types.false
- Generate no files.'html'
- - Generate a HTML file'css'
- - Generate CSS file'fonts'
- - Generate font files (based on the types requested)false
- default
- type: string | string[]svg
- description: Font file types to generate. Possible values:
- ttf
- woff
- woff2
- eot
- ['eot', 'woff', 'woff2', 'ttf', 'svg']
- default
- See webfonts-generator#types
- type: { [key: string]: number }startCodepoint
- description: Specific code-points for certain icons. Icons without code-points will have code-points incremented from skipping duplicates.
- See webfonts-generator#codepoints
- type: string'icon-'
- description: CSS class prefix for each of the generated icons.
- default
- See webfonts-generator#templateoptions
- type: string'.icon'
- description: CSS base selector to which the font will be applied.
- default
- See webfonts-generator#templateoptions
- type: { [format in 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot']?: unknown };
- description: Specific per format arbitrary options to pass to the generator. Format and matching generator:
- svg - svgicons2svgfont.
- ttf - svg2ttf.
- woff2 - ttf2woff2.
- woff - ttf2woff.
- eot - ttf2eot.
- See webfonts-generator#formatoptions
- type: string'vite-svg-2-webfont.css'
- description: Virtual module id which is used by Vite to import the plugin artifacts. E.g. the default value is "vite-svg-2-webfont.css" so "virtual:vite-svg-2-webfont.css" should be imported.
- default
- type: booleanfalse
- description: Inline font assets in CSS using base64 encoding.
- default
- type: booleanfalse
- description: Allow outputting assets (HTML, CSS, and Fonts) during build. see
- default
The plugin exposes a public API that can be used inside another plugins using Rollup inter-plugin communication mechanism.
Currently available methods:
- returns: Array<{ type: 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot', href: string }>type
- description
- - a font format generated by a pluginhref` - a path to a generated font
-
- This repo contains the usage example.