vite-plugin-svelte-svg

2.3.0 verified Mon Apr 27 auth: no javascript

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}`.

Common errors

error Error: Cannot find module 'vite-plugin-svelte-svg' ↓

cause Missing dependency or using CommonJS require instead of import.

fix

Run npm install -D vite-plugin-svelte-svg and ensure your vite.config.js uses import syntax.

error The requested module '...icon.svg?component' does not provide an export named 'default' ↓

cause Using the ?component suffix but the plugin is not configured or not added to Vite plugins.

fix

Add import svelteSVG from 'vite-plugin-svelte-svg' to vite.config.js and include it in the plugins array.

error TypeError: SVG is not a constructor ↓

cause Importing SVG file without the ?component suffix, so it is treated as a URL string.

fix

Use import MyIcon from 'path/icon.svg?component' with the suffix.

error SVG element not rendered; svg tags missing attributes ↓

cause SVG was imported as a Svelte component but the SVG element inside has no attributes (viewBox removed by SVGO).

fix

Set svgoConfig: { plugins: [{ name: 'removeViewBox', active: false }] }.

Warnings

breaking Only supports Vite < 5 and Svelte < 5. Using with Vite 5 or Svelte 5 will fail. ↓

fix Downgrade to Vite 4.x or Svelte 4.x, or use an alternative plugin like 'vite-plugin-svelte-svg2' which supports Vite 5.

deprecated Suffix `?component` or `?c` is required by default. This may change in future versions. ↓

fix Set `requireSuffix: false` in plugin options to import SVG without suffix, but note that this may conflict with other SVG handling.

gotcha When using TypeScript, the imported SVG component may cause type errors if no declaration file is provided. ↓

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`.

gotcha SVGO optimization can remove viewBox if not configured explicitly, breaking scaling. ↓

fix Add `{ name: 'removeViewBox', active: false }` to `svgoConfig.plugins`.

gotcha Plugin does not work with HMR for SVG changes in some Vite versions; requires full reload. ↓

fix Restart dev server after modifying SVG files.

Install

npm install vite-plugin-svelte-svg

yarn add vite-plugin-svelte-svg

pnpm add vite-plugin-svelte-svg

Imports

svelteSVG

wrong

const svelteSVG = require('vite-plugin-svelte-svg')

correct

import svelteSVG from 'vite-plugin-svelte-svg'

ESM-only; CommonJS require does not work in Vite config (which expects ESM).

MyIcon (via ?component)
wrong
```
import MyIcon from 'path/to/icon.svg'
```
correct
```
import MyIcon from 'path/to/icon.svg?component'
```
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.
default export (SVG as component)
```
import MyIcon from 'path/to/icon.svg?c'
```
The shorthand `?c` is equivalent to `?component`.

Quickstart

Configures Vite with svelte-svg plugin and usage: imports an SVG as a Svelte component with the ?component suffix.

// vite.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import svelteSVG from 'vite-plugin-svelte-svg';

export default defineConfig({
  plugins: [
    svelte(),
    svelteSVG({
      svgoConfig: {
        plugins: [
          { name: 'removeViewBox', active: false },
        ],
      },
    }),
  ],
});

// App.svelte
<script>
  import MyIcon from './assets/icon.svg?component';
</script>

<MyIcon width={24} height={24} fill="currentColor" />