vite-plugin-svgo

2.0.0 verified Mon Apr 27 auth: no javascript

Vite plugin that imports SVG files as raw strings and optimizes them using SVGO (SVG Optimizer). Current stable version is 2.0.0, released with updated SVGO dependency. It allows custom SVGO configuration options and ships TypeScript types. Differentiates from other Vite SVG plugins by focusing solely on SVGO optimization and raw string output, without extra transformations like React components.

Common errors

error Cannot find module 'vite-plugin-svgo' or its corresponding type declarations. ↓

cause Missing or misconfigured TypeScript module resolution for SVG files.

fix

Add a declaration file (e.g., svg.d.ts) with: declare module '*.svg' { const content: string; export default content; }

error Uncaught TypeError: svg is not a function ↓

cause Using CommonJS require() with ESM-only plugin.

fix

Use ES module import syntax: import svg from 'vite-plugin-svgo'

error Error: [plugin:vite-plugin-svgo] Unknown plugin '...' ↓

cause SVGO v3 plugin name mismatch or incorrect configuration structure.

fix

Ensure all plugins use SVGO v3 format: { name: 'pluginName', params: {...} }. Reference SVGO v3 documentation.

Warnings

breaking v2.0.0 removed support for SVGO v2 config format. SVGO options object must follow SVGO v3 schema. ↓

fix Update SVGO options to match v3 syntax (e.g., plugins array with name/params objects).

breaking v1.5.0 upgraded SVGO from v2 to v3.2.x, which uses a new plugin format. ↓

fix Adjust configuration to use new SVGO v3 plugin structure. Refer to SVGO migration guide.

deprecated v1.4.0 upgraded SVGO to v2.x which changed the config format from SVGO v1. ↓

fix Use SVGO v2 compatible options. Consider upgrading to v1.5.0+ for SVGO v3.

gotcha Plugin only outputs raw SVG strings, not React components or URLs. Using it with frameworks like React requires additional processing. ↓

fix Use a different plugin (e.g., vite-plugin-svgr) if you need React components. Otherwise, use innerHTML or similar to render the string.

gotcha TypeScript strict mode may require 'resolveJsonModule' and 'allowSyntheticDefaultImports' in tsconfig for SVG imports. ↓

fix Add 'resolveJsonModule' and 'allowSyntheticDefaultImports' to your tsconfig compilerOptions.

Install

npm install vite-plugin-svgo

yarn add vite-plugin-svgo

pnpm add vite-plugin-svgo

Imports

default

wrong

const svg = require('vite-plugin-svgo')

correct

import svg from 'vite-plugin-svgo'

ESM-only plugin; CJS require not supported.

SvgoPluginOptions

wrong

import { SvgoPluginOptions } from 'vite-plugin-svgo'

correct

import type { SvgoPluginOptions } from 'vite-plugin-svgo'

Type import only, not a value export.

default function usage
wrong
```
new svg()
```
correct
```
svg({ multipass: true })
```
The default export is a function, not a class.

Quickstart

Configures vite-plugin-svgo in vite.config.ts with SVGO options and demonstrates importing an SVG as an optimized string.

import svg from 'vite-plugin-svgo';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    svg({
      multipass: true,
      plugins: [
        {
          name: 'preset-default',
          params: {
            overrides: {
              convertColors: {
                currentColor: true,
              },
            },
          },
        },
      ],
    }),
  ],
});
// Then import SVG files in your code:
// import icon from './icon.svg'; // returns optimized SVG string