sumsolution / vite-plugin-svg-to-font

Vite plugin to convert SVG files into icon font files of eot, svg, ttf, woff, and woff2. Additionally generates a css file to utilize the icon font.
5 stars 0 forks source link

@sumsolution/vite-plugin-svg-to-font

test build Maintainability

Vite plugin for converting SVG files into an icon font in the most commonly supported formats.

Install

PNPM

pnpm add -D @sumsolution/vite-plugin-svg-to-font

Yarn

yarn add -D @sumsolution/vite-plugin-svg-to-font

NPM

npm i -D @sumsolution/vite-plugin-svg-to-font

Usage

Add the plugin to your vite configs plugin array.

// vite.config.ts
import { resolve } from 'path'
import { defineConfig } from 'vite'
import vitePluginSVGToFont from '@sumsolution/vite-plugin-svg-to-font'

export default defineConfig({
  plugins: [
    vitePluginSVGToFont({
      svgPath: resolve(__dirname, 'icons')
    })
  ]
})

Import the virtual module into the apps main entry point

// main.ts
import 'virtual:svg-to-font.css'

Use the font in templates with the icon font class and an icon class name. The default font class name is "icon-font" and can be overriden by passing the fontName configuration option. Icon class names are derived from their .svg file name.

In the below example, the add class would display the icon created from the file {svgPath}/add.svg

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

Configuration

The plugin has a very simple API consisting of one required parameter and 2 optional parameters.

svgPath

fontName

outDir