Awesome

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,
          },
        },
      },
    },
  ],
})