{"id":20686,"library":"vite-plugin-svgr","title":"vite-plugin-svgr","description":"Vite plugin to transform SVG files into React components using SVGR. Current stable version is 5.2.0, with regular updates. Key differentiator: seamless integration with Vite, supports both import with ?react query and default export, optional SVGO optimization, and TypeScript declarations. Compared to alternatives like @svgr/webpack, it is Vite-native and simplifies SVG component usage in React projects.","status":"active","version":"5.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/pd4d10/vite-plugin-svgr","tags":["javascript","vite","vite-plugin","typescript"],"install":[{"cmd":"npm install vite-plugin-svgr","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-svgr","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-svgr","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin designed for Vite build tool","package":"vite","optional":false},{"reason":"Core SVGR transformation library (lazy loaded since v5.1.0)","package":"@svgr/core","optional":false},{"reason":"Optional plugin for SVGO optimization if configured","package":"@svgr/plugin-svgo","optional":true}],"imports":[{"note":"Default import is the standard; CommonJS require may not work with ESM-only configuration.","wrong":"const svgr = require('vite-plugin-svgr')","symbol":"svgr","correct":"import svgr from 'vite-plugin-svgr'"},{"note":"The ?react query is required in v4+ to trigger SVG transformation. Without it, the file is treated as a regular asset URL.","wrong":"import Logo from './logo.svg'","symbol":"default export with ?react","correct":"import Logo from './logo.svg?react'"},{"note":"The correct path is 'vite-plugin-svgr/client', not just 'vite-plugin-svgr'.","wrong":"/// <reference types=\"vite-plugin-svgr\" />","symbol":"TypeScript declaration","correct":"/// <reference types=\"vite-plugin-svgr/client\" />"},{"note":"Importing without ?react gives the SVG file URL string, not a React component.","wrong":"","symbol":"default export (SVG source)","correct":"import svgUrl from './logo.svg'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport svgr from 'vite-plugin-svgr';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    svgr({\n      svgrOptions: {\n        icon: true,\n        expandProps: 'end',\n      },\n      include: '**/*.svg?react',\n    }),\n  ],\n});\n\n// App.tsx\nimport ReactLogo from './logo.svg?react';\n\nfunction App() {\n  return (\n    <div>\n      <ReactLogo width={100} height={100} />\n    </div>\n  );\n}\n\nexport default App;\n\n// vite-env.d.ts\n/// <reference types=\"vite-plugin-svgr/client\" />","lang":"typescript","description":"Demonstrates how to set up vite-plugin-svgr in a Vite project with React, including import syntax and TypeScript declaration."},"warnings":[{"fix":"Use import Logo from './logo.svg?react' instead of import Logo from './logo.svg'.","message":"In v4.0.0, SVG import behavior changed: you must append ?react query to import as React component. Without it, you get the default export (SVG URL).","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Upgrade Vite to v3+.","message":"v5.0.0 dropped Vite 2 support. Minimum Vite version is now 3.0.0.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Add ?react query to import React component.","message":"v4.0.0 changed the default export to the SVG file URL (string). If you relied on importing SVG as a component without ?react, it will break.","severity":"deprecated","affected_versions":">=4.0.0 <5.0.0"},{"fix":"Install @svgr/plugin-svgo and add to svgrOptions.plugins.","message":"SVGO is not enabled by default. If you expect SVGO optimization, you need to manually install @svgr/plugin-svgo and configure it via svgrOptions.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Add /// <reference types=\"vite-plugin-svgr/client\" /> to your vite-env.d.ts.","message":"TypeScript declaration must be referenced with 'vite-plugin-svgr/client' not 'vite-plugin-svgr'.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use ESM imports (import) or set type: 'module' in package.json.","message":"v3.2.0 re-added CJS entry, but since v4.0.0 the package is ESM-only. CommonJS require will fail.","severity":"breaking","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install @svgr/plugin-svgo as a dependency.","cause":"SVGO plugin not installed but configured in svgrOptions.plugins.","error":"Uncaught Error: @svgr/core tried to access @svgr/plugin-svgo but it's not installed"},{"fix":"Run npm install -D vite-plugin-svgr and ensure Vite >=3 is installed.","cause":"Package not installed or mismatched Vite version.","error":"Module not found: Error: Can't resolve 'vite-plugin-svgr'"},{"fix":"Add /// <reference types=\"vite-plugin-svgr/client\" /> in a .d.ts file.","cause":"Missing TypeScript declaration for SVG imports.","error":"Cannot find module 'vite-plugin-svgr' or its corresponding type declarations."},{"fix":"Use import svgr from 'vite-plugin-svgr' instead of require()","cause":"Using CommonJS require in a project that expects ESM import.","error":"The requested module 'vite-plugin-svgr' does not provide an export named 'default'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}