Registry / web-framework / vite-plugin-svgo

vite-plugin-svgo

library2.0.0jsnpmunverified

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.

web-framework

npm install vite-plugin-svgo

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SVGO

vite-plugin-svgo

web-frameworkjavascriptv2.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import svg from 'vite-plugin-svgo'

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

ESM-only plugin; CJS require not supported.

SvgoPluginOptions

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

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

Type import only, not a value export.

default function usage

✓ svg({ multipass: true })

✗ new svg()

The default export is a function, not a class.

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

Debug

Known issues

breakingv2.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).

affects: >=2.0.0

breakingv1.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.

affects: >=1.5.0 <2.0.0

deprecatedv1.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.

affects: <2.0.0

gotchaPlugin 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.

affects: >=1.0.0

gotchaTypeScript strict mode may require 'resolveJsonModule' and 'allowSyntheticDefaultImports' in tsconfig for SVG imports.

fix

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

affects: >=1.0.0

Errors

Common errors & fixes

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

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; }

Uncaught TypeError: svg is not a function

Using CommonJS require() with ESM-only plugin.

fix

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

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

SVGO v3 plugin name mismatch or incorrect configuration structure.

fix

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

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

viterequiredpeer dependency for Vite plugin system

typescriptoptionalpeer dependency for TypeScript typing support

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/r3dDoX/vite-plugin-svgo ↗

packagehttps://www.npmjs.com/package/vite-plugin-svgo ↗