{"id":20669,"library":"vite-plugin-fast-react-svg","title":"vite-plugin-fast-react-svg","description":"vite-plugin-fast-react-svg (v0.6.2) transforms SVG files into React components without Babel, using regex and dangerouslySetInnerHTML for near-instant processing. Requires Vite 6.3+/7/8 and React 18 or 19. Key differentiator vs. svgr: no AST/Babel overhead, orders of magnitude faster for large projects. Supports only optimized SVGs (svgo with convertStyleToAttrs). ESM-only since v0.5.0, Node 18+. Ships TypeScript types. Releases follow Vite major updates; breaking changes are infrequent but significant (drop of ?inline, option removal, import changes). Usually released every few months.","status":"active","version":"0.6.2","language":"javascript","source_language":"en","source_url":"https://github.com/ArnaudBarre/vite-plugin-fast-react-svg","tags":["javascript","vite","vite-plugin","react","svg","typescript"],"install":[{"cmd":"npm install vite-plugin-fast-react-svg","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-fast-react-svg","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-fast-react-svg","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: components are rendered with React; versions 18 or 19 supported.","package":"react","optional":true},{"reason":"Peer dependency: Vite plugin; requires ^6.3 || ^7 || ^8.","package":"vite","optional":true}],"imports":[{"note":"Named export only. Default import was removed in v0.2.0.","wrong":"import svgPlugin from 'vite-plugin-fast-react-svg';","symbol":"svgPlugin","correct":"import { svgPlugin } from 'vite-plugin-fast-react-svg';"},{"note":"TypeScript needs type augmentation. Add 'vite-plugin-fast-react-svg/types' to tsconfig compilerOptions.types or reference in .d.ts.","wrong":null,"symbol":"SVG import","correct":"import Logo from './logo.svg';"},{"note":"svgToJSX was removed in v0.4.0. Use svgToJS instead.","wrong":"import { svgToJSX } from 'vite-plugin-fast-react-svg';","symbol":"svgToJS","correct":"import { svgToJS } from 'vite-plugin-fast-react-svg';"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport { svgPlugin } from 'vite-plugin-fast-react-svg';\n\nexport default defineConfig({\n  plugins: [svgPlugin()],\n});\n\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    \"types\": [\"vite-plugin-fast-react-svg/types\", \"vite/client\"]\n  }\n}\n\n// App.tsx\nimport Logo from './logo.svg';\n\nexport default function App() {\n  return <Logo width={100} height={100} />;\n}","lang":"typescript","description":"Configure Vite plugin, add TypeScript types, then import SVG as React component."},"warnings":[{"fix":"Change `import svgPlugin from 'vite-plugin-fast-react-svg'` to `import { svgPlugin } from 'vite-plugin-fast-react-svg'`.","message":"Default export removed in v0.2.0 – use named export `svgPlugin`.","severity":"breaking","affected_versions":">=0.2.0"},{"fix":"Replace `import { svgToJSX }` with `import { svgToJS }`. Remove `?inline` suffix from imports; Vite 5 core now inlines SVGs.","message":"`svgToJSX` renamed to `svgToJS` in v0.4.0 and `?inline` support dropped in v0.5.0.","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Ensure your project uses ESM (type: module in package.json) and Node 18+.","message":"ESM-only since v0.5.0; Node 18+ required. CommonJS `require()` will fail.","severity":"breaking","affected_versions":">=0.5.0"},{"fix":"Upgrade Vite to ^6.3 || ^7 || ^8.","message":"Peer dependency change: requires Vite 6.3+ (or 7, 8). Older Vite 5 not supported since v0.5.0.","severity":"breaking","affected_versions":">=0.5.0"},{"fix":"Run SVGs through svgo with convertStyleToAttrs enabled, or manually convert styles to attributes.","message":"SVG must be pre-optimized with svgo and `convertStyleToAttrs`; inline styles not converted will break.","severity":"gotcha","affected_versions":"all"},{"fix":"Add `\"vite-plugin-fast-react-svg/types\"` to tsconfig compilerOptions.types.","message":"TypeScript users must add type augmentation; otherwise TS will error on SVG imports.","severity":"gotcha","affected_versions":"all"},{"fix":"Remove any options object from `svgPlugin()` call – it takes no arguments.","message":"Options removed in v0.4.0; previously available options like `useInnerHTML` no longer exist.","severity":"deprecated","affected_versions":">=0.4.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add `\"vite-plugin-fast-react-svg/types\"` to the `types` array in your tsconfig.json compilerOptions.","cause":"Missing type augmentation for SVG imports.","error":"Module '\"vite-plugin-fast-react-svg/types\"' does not exist."},{"fix":"Either include type augmentation as above, or create a custom .d.ts: `declare module '*.svg' { import type { FC, SVGProps } from 'react'; const SVGComponent: FC<SVGProps<SVGSVGElement>>; export default SVGComponent; }`","cause":"TypeScript cannot resolve SVG files without type declarations.","error":"Cannot find module './logo.svg' or its corresponding type declarations."},{"fix":"Ensure import is `import { svgPlugin } from 'vite-plugin-fast-react-svg'`.","cause":"Used default import instead of named export for `svgPlugin` – results in undefined plugin.","error":"Uncaught Error: Element type is invalid: expected a string or a class/function but got: undefined."},{"fix":"Run `npm install vite-plugin-fast-react-svg` and use Node 18+.","cause":"Package not installed or Node version <18 (ESM-only).","error":"Failed to resolve import \"vite-plugin-fast-react-svg\" from \"vite.config.ts\". Does the file exist?"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}