@palenov/vite-plugin-fantasticon

A Vite plugin for generating webfont icons from SVG files using fantasticon.

Installation

npm install --save-dev @palenov/vite-plugin-fantasticon

Usage

Add the plugin to your vite.config.ts:

import { defineConfig } from 'vite'
import { fantasticon } from '@palenov/vite-plugin-fantasticon'

export default defineConfig({
  plugins: [
    fantasticon({
      inputDir: 'src/icons', // Folder with SVG icons
      outputDir: 'dist/icons', // Where to output webfonts and assets
      // Additional fantasticon RunnerOptions
    }),
  ],
})

Options

The plugin accepts all fantasticon RunnerOptions.

Example:

fantasticon({
  inputDir: 'src/icons',
  outputDir: 'dist/icons',
  fontTypes: [FontAssetType.WOFF, FontAssetType.WOFF2, FontAssetType.TTF],
  assetTypes: [OtherAssetType.CSS, OtherAssetType.JSON],
  name: 'my-icons',
})

Default Parameters

If you do not specify some options, the plugin uses the following defaults:

• name: icons-${npm_package_name} (or icons-default if npm_package_name is not set)
• fontTypes: [EOT, WOFF, WOFF2, TTF, SVG]
• assetTypes: [CSS, TS]
• formatOptions.svg:
  • round: 1
  • normalize: true
  • fontHeight: 512
  • descent: 64

You can override any of these by passing your own values.

Example

See the playground folder in the repository for a usage example.

License

MIT