{"id":22862,"library":"vite-plugin-svelte-svg","title":"vite-plugin-svelte-svg","description":"Vite 4.x plugin (v2.3.0) to import SVG files as Svelte components, with optional SVGO optimization. It requires the `?component` suffix (or `?c`) to distinguish SVG components from plain SVG URLs, but this can be disabled via `requireSuffix: false`. The plugin is Svelte 3/4 compatible but does NOT support Svelte 5 or Vite 5. It ships TypeScript types. Releases are infrequent, with v2 being the current stable line. Alternatives include `svelte-svg` or manual import via `{@html}`.","status":"active","version":"2.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/metafy-gg/vite-plugin-svelte-svg","tags":["javascript","vite-plugin","typescript"],"install":[{"cmd":"npm install vite-plugin-svelte-svg","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-svelte-svg","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-svelte-svg","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency, required at runtime to render Svelte components","package":"svelte","optional":false},{"reason":"peer dependency, plugin for Vite's build system","package":"vite","optional":false},{"reason":"used to optimize SVGs during transformation","package":"svgo","optional":true}],"imports":[{"note":"ESM-only; CommonJS require does not work in Vite config (which expects ESM).","wrong":"const svelteSVG = require('vite-plugin-svelte-svg')","symbol":"svelteSVG","correct":"import svelteSVG from 'vite-plugin-svelte-svg'"},{"note":"Without the ?component suffix, the imported value may be a URL string or undefined depending on Vite config. The plugin requires the suffix by default.","wrong":"import MyIcon from 'path/to/icon.svg'","symbol":"MyIcon (via ?component)","correct":"import MyIcon from 'path/to/icon.svg?component'"},{"note":"The shorthand `?c` is equivalent to `?component`.","symbol":"default export (SVG as component)","correct":"import MyIcon from 'path/to/icon.svg?c'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport { svelte } from '@sveltejs/vite-plugin-svelte';\nimport svelteSVG from 'vite-plugin-svelte-svg';\n\nexport default defineConfig({\n  plugins: [\n    svelte(),\n    svelteSVG({\n      svgoConfig: {\n        plugins: [\n          { name: 'removeViewBox', active: false },\n        ],\n      },\n    }),\n  ],\n});\n\n// App.svelte\n<script>\n  import MyIcon from './assets/icon.svg?component';\n</script>\n\n<MyIcon width={24} height={24} fill=\"currentColor\" />","lang":"javascript","description":"Configures Vite with svelte-svg plugin and usage: imports an SVG as a Svelte component with the ?component suffix."},"warnings":[{"fix":"Downgrade to Vite 4.x or Svelte 4.x, or use an alternative plugin like 'vite-plugin-svelte-svg2' which supports Vite 5.","message":"Only supports Vite < 5 and Svelte < 5. Using with Vite 5 or Svelte 5 will fail.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Set `requireSuffix: false` in plugin options to import SVG without suffix, but note that this may conflict with other SVG handling.","message":"Suffix `?component` or `?c` is required by default. This may change in future versions.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Add a declaration file `src/svg.d.ts` with: declare module '*.svg?component' { import type { SvelteComponent } from 'svelte'; export default class extends SvelteComponent {} } or use `vite-plugin-svelte-svg/types`.","message":"When using TypeScript, the imported SVG component may cause type errors if no declaration file is provided.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add `{ name: 'removeViewBox', active: false }` to `svgoConfig.plugins`.","message":"SVGO optimization can remove viewBox if not configured explicitly, breaking scaling.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Restart dev server after modifying SVG files.","message":"Plugin does not work with HMR for SVG changes in some Vite versions; requires full reload.","severity":"gotcha","affected_versions":">=2.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 -D vite-plugin-svelte-svg` and ensure your vite.config.js uses `import` syntax.","cause":"Missing dependency or using CommonJS require instead of import.","error":"Error: Cannot find module 'vite-plugin-svelte-svg'"},{"fix":"Add `import svelteSVG from 'vite-plugin-svelte-svg'` to vite.config.js and include it in the plugins array.","cause":"Using the ?component suffix but the plugin is not configured or not added to Vite plugins.","error":"The requested module '...icon.svg?component' does not provide an export named 'default'"},{"fix":"Use `import MyIcon from 'path/icon.svg?component'` with the suffix.","cause":"Importing SVG file without the ?component suffix, so it is treated as a URL string.","error":"TypeError: SVG is not a constructor"},{"fix":"Set `svgoConfig: { plugins: [{ name: 'removeViewBox', active: false }] }`.","cause":"SVG was imported as a Svelte component but the SVG element inside has no attributes (viewBox removed by SVGO).","error":"SVG element not rendered; svg tags missing attributes"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}