{"id":22872,"library":"vite-plugin-svgr-component","title":"vite-plugin-svgr-component","description":"A Vite plugin that imports SVG files as React components using SVGR, with zero-config defaults and full configurability. v1.0.1 is the current stable version, with slow release cadence. It automatically transforms all SVG imports to React components without needing a query string like ?component, different from other SVGR Vite plugins. Ships TypeScript types, uses SVGO for optimization, and supports micromatch patterns to filter which SVGs are transformed. Requires peer dependencies: react >= 17.0.2 and vite >= 2.7.13.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/chempogonzalez/vite-plugin-svgr-component","tags":["javascript","vite","plugin","svgr","react","svg","component","typescript"],"install":[{"cmd":"npm install vite-plugin-svgr-component","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-svgr-component","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-svgr-component","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; the plugin generates React components from SVGs.","package":"react","optional":false},{"reason":"Peer dependency; this is a Vite plugin.","package":"vite","optional":false}],"imports":[{"note":"ESM-only; named export. CommonJS require will cause an error.","wrong":"const svgrComponent = require('vite-plugin-svgr-component')","symbol":"svgrComponent","correct":"import { svgrComponent } from 'vite-plugin-svgr-component'"},{"note":"SVG files are default-exported as React components. Named import will result in undefined.","wrong":"import { CustomIcon } from './icon.svg'","symbol":"CustomIcon","correct":"import CustomIcon from './icon.svg'"},{"note":"For TypeScript projects, add a triple-slash reference directive in a .d.ts file (typically vite-env.d.ts). A regular import will not register the types.","wrong":"import 'vite-plugin-svgr-component/client'","symbol":"type definitions for client","correct":"/// <reference types=\"vite-plugin-svgr-component/client\" />"}],"quickstart":{"code":"// vite.config.ts\nimport { svgrComponent } from 'vite-plugin-svgr-component';\n\nexport default {\n  plugins: [svgrComponent()],\n};\n\n// App.tsx\nimport Star from './star.svg';\n\nfunction App() {\n  return (\n    <div>\n      <Star title=\"star icon\" titleId=\"star\" />\n    </div>\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"Configures the plugin in vite.config.ts with default options, then imports an SVG as a React component and uses it with optional title and titleId props."},"warnings":[{"fix":"Use import syntax instead of require().","message":"ESM-only package; require() will throw an error.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"If you need the raw SVG URL or file content, use a different import approach (e.g., ?url or ?raw).","message":"All SVG imports are automatically transformed to React components; there is no ?component query parameter.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add /// <reference types=\"vite-plugin-svgr-component/client\" /> to your vite-env.d.ts file.","message":"TypeScript projects must reference the client types via triple-slash directive; otherwise, SVG imports will be typed as any.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use importStringPattern to restrict which files are transformed (best practice).","message":"Default behavior may change in future major versions; currently all .svg files are transformed.","severity":"deprecated","affected_versions":"1.x"},{"fix":"Test SVGR option combinations; refer to SVGR documentation.","message":"SVGR options object is directly passed; some options may conflict with the plugin's defaults (e.g., icon vs. custom dimensions).","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":"Change to import { svgrComponent } from 'vite-plugin-svgr-component'","cause":"Using CommonJS require() to import an ESM-only package.","error":"Error: require() of ES Module not supported"},{"fix":"Use import Icon from './icon.svg' (default import).","cause":"Attempting named import from SVG file instead of default import.","error":"Module '\"./icon.svg\"' has no exported member 'Icon'."},{"fix":"Use /// <reference types=\"vite-plugin-svgr-component/client\" /> in a .d.ts file.","cause":"Tried to import the client type definitions with an import statement instead of a triple-slash reference.","error":"Cannot find module 'vite-plugin-svgr-component/client' or its corresponding type declarations."},{"fix":"Add the triple-slash reference directive mentioned above.","cause":"In TypeScript using the component without the client type reference, so props are typed incorrectly.","error":"Type 'string' is not assignable to type 'SVGComponentProps'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}