{"id":22863,"library":"vite-plugin-svelte-svgr","title":"vite-plugin-svelte-svgr","description":"Vite plugin (v1.0.4) for importing SVG files as Svelte components, URLs, or raw strings, inspired by React's @svgr/webpack. Ships TypeScript types. Differentiators: optional SVGO processing, per-directory type configuration via include/exclude, and query parameter overrides (?component, ?url, ?raw). Alternatives: iconify for icon sets. Released sporadically; peer deps svelte >=3.x and vite >=2.9.13. Stable for basic usage, but limited community adoption.","status":"active","version":"1.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/blujedis/vite-plugin-svelte-svgr","tags":["javascript","svg","vite-plugin","vite-plugin-svgr","svelte","sveltekit","svgo","typescript"],"install":[{"cmd":"npm install vite-plugin-svelte-svgr","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-svelte-svgr","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-svelte-svgr","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for processing Svelte components","package":"svelte","optional":false},{"reason":"Build tool peer dependency; plugin lifecycle hooks","package":"vite","optional":false}],"imports":[{"note":"Default export only. Named import will fail.","wrong":"import { svgr } from 'vite-plugin-svelte-svgr'","symbol":"default","correct":"import svgr from 'vite-plugin-svelte-svgr'"},{"note":"Default import yields SvelteComponent unless overridden by config. Query param ?component explicitly forces component import. TypeScript: declare module '*.svg' { ... }.","wrong":"import Icon from './icon.svg?component'","symbol":"SvgComponent","correct":"import Icon from './icon.svg'"},{"note":"No explicit type exports; TypeScript declarations augment SVG module types automatically.","wrong":"","symbol":"SvgType","correct":"import type {} from 'vite-plugin-svelte-svgr'"}],"quickstart":{"code":"// vite.config.js\nimport { sveltekit } from '@sveltejs/kit/vite';\nimport svgr from 'vite-plugin-svelte-svgr';\n\nexport default {\n  plugins: [sveltekit(), svgr()]\n};\n\n// App.svelte\n<script>\n  import Logo from './logo.svg';\n</script>\n\n<Logo />","lang":"javascript","description":"Configures vite-plugin-svelte-svgr in SvelteKit (v1.0.0-next.346+) and imports SVG as a Svelte component."},"warnings":[{"fix":"Move plugin config to svelte.config.js under kit.vite.plugins array.","message":"SvelteKit versions before 1.0.0-next.346 require plugin configuration in svelte.config.js (kit.vite.plugins) instead of vite.config.js.","severity":"gotcha","affected_versions":"<1.0.0-next.346"},{"fix":"Use relative paths like 'src/lib/icons' or globs like 'src/**/*.svg'.","message":"The include/exclude pattern uses Rollup's createFilter; paths must be relative to project root. Using absolute paths may break.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Configure SVGO to preserve viewBox: { svgo: { plugins: [{ name: 'preset-default', params: { overrides: { removeViewBox: false } } }] } }.","message":"Default SVGO preset may remove viewBox; icons appear broken. The preset-default removeViewBox is true by default.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Pin exact version and test upgrades carefully.","message":"No version 2 changes yet; note that plugin is early-stage and may undergo breaking changes without major semver bump.","severity":"breaking","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":"Run `npm install vite-plugin-svelte-svgr -D`","cause":"Plugin not installed or devDependencies not installed.","error":"Error: Cannot find module 'vite-plugin-svelte-svgr'"},{"fix":"Use `import svgr from 'vite-plugin-svelte-svgr'` instead of `import { svgr } from ...`","cause":"Named import instead of default import.","error":"TypeError: svgr is not a function"},{"fix":"Ensure `\"type\": \"module\"` in package.json or use .mjs extension for config.","cause":"Using ESM in a CommonJS context (older Node or wrong module type).","error":"The requested module 'vite-plugin-svelte-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}