Skip to content

Vite plugin to import and compress svg files with SVGO

Notifications You must be signed in to change notification settings

r3dDoX/vite-plugin-svgo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

70 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vite Plugin SVGO

Vite plugin to load and optimize SVG files as raw string. For the optimization SVGO is used.

npm GitHub package.json version

// Lit-Element example
import {html, unsafeSVG} from 'lit';
import icon from '../assets/icon.svg';

html`
  <div>${unsafeSVG(icon)}</div>
`;

Install

npm install -D vite-plugin-svgo

Setup

import svg from 'vite-plugin-svgo'

export default defineConfig({
  plugins: [svg()]
})

SVGO Configuration

The plugin accepts custom optimize options.

// vite.config.ts
svg({
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          convertColors: {
            currentColor: true,
          },
        },
      },
    },
  ],
})