{"id":22871,"library":"vite-plugin-svgo","title":"vite-plugin-svgo","description":"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.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/r3dDoX/vite-plugin-svgo","tags":["javascript","vite","vite-plugin","svg","svgo","typescript"],"install":[{"cmd":"npm install vite-plugin-svgo","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-svgo","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-svgo","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for Vite plugin system","package":"vite","optional":false},{"reason":"peer dependency for TypeScript typing support","package":"typescript","optional":true}],"imports":[{"note":"ESM-only plugin; CJS require not supported.","wrong":"const svg = require('vite-plugin-svgo')","symbol":"default","correct":"import svg from 'vite-plugin-svgo'"},{"note":"Type import only, not a value export.","wrong":"import { SvgoPluginOptions } from 'vite-plugin-svgo'","symbol":"SvgoPluginOptions","correct":"import type { SvgoPluginOptions } from 'vite-plugin-svgo'"},{"note":"The default export is a function, not a class.","wrong":"new svg()","symbol":"default function usage","correct":"svg({ multipass: true })"}],"quickstart":{"code":"import svg from 'vite-plugin-svgo';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n  plugins: [\n    svg({\n      multipass: true,\n      plugins: [\n        {\n          name: 'preset-default',\n          params: {\n            overrides: {\n              convertColors: {\n                currentColor: true,\n              },\n            },\n          },\n        },\n      ],\n    }),\n  ],\n});\n// Then import SVG files in your code:\n// import icon from './icon.svg'; // returns optimized SVG string","lang":"typescript","description":"Configures vite-plugin-svgo in vite.config.ts with SVGO options and demonstrates importing an SVG as an optimized string."},"warnings":[{"fix":"Update SVGO options to match v3 syntax (e.g., plugins array with name/params objects).","message":"v2.0.0 removed support for SVGO v2 config format. SVGO options object must follow SVGO v3 schema.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Adjust configuration to use new SVGO v3 plugin structure. Refer to SVGO migration guide.","message":"v1.5.0 upgraded SVGO from v2 to v3.2.x, which uses a new plugin format.","severity":"breaking","affected_versions":">=1.5.0 <2.0.0"},{"fix":"Use SVGO v2 compatible options. Consider upgrading to v1.5.0+ for SVGO v3.","message":"v1.4.0 upgraded SVGO to v2.x which changed the config format from SVGO v1.","severity":"deprecated","affected_versions":"<2.0.0"},{"fix":"Use a different plugin (e.g., vite-plugin-svgr) if you need React components. Otherwise, use innerHTML or similar to render the string.","message":"Plugin only outputs raw SVG strings, not React components or URLs. Using it with frameworks like React requires additional processing.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add 'resolveJsonModule' and 'allowSyntheticDefaultImports' to your tsconfig compilerOptions.","message":"TypeScript strict mode may require 'resolveJsonModule' and 'allowSyntheticDefaultImports' in tsconfig for SVG imports.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add a declaration file (e.g., svg.d.ts) with: declare module '*.svg' { const content: string; export default content; }","cause":"Missing or misconfigured TypeScript module resolution for SVG files.","error":"Cannot find module 'vite-plugin-svgo' or its corresponding type declarations."},{"fix":"Use ES module import syntax: import svg from 'vite-plugin-svgo'","cause":"Using CommonJS require() with ESM-only plugin.","error":"Uncaught TypeError: svg is not a function"},{"fix":"Ensure all plugins use SVGO v3 format: { name: 'pluginName', params: {...} }. Reference SVGO v3 documentation.","cause":"SVGO v3 plugin name mismatch or incorrect configuration structure.","error":"Error: [plugin:vite-plugin-svgo] Unknown plugin '...'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}