Registry / web-framework / vite-plugin-svelte-svg

vite-plugin-svelte-svg

library2.3.0jsnpmunverified

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

web-framework

npm install vite-plugin-svelte-svg

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SVELTE

vite-plugin-svelte-svg

web-frameworkjavascriptv2.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

svelteSVG

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

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

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

MyIcon (via ?component)

✓ import MyIcon from 'path/to/icon.svg?component'

✗ import MyIcon from 'path/to/icon.svg'

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

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" />

Debug

Known issues

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

affects: >=2.0.0

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

affects: >=1.0.0

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

affects: >=1.0.0

gotchaSVGO optimization can remove viewBox if not configured explicitly, breaking scaling.

fix

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

affects: >=1.0.0

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

fix

Restart dev server after modifying SVG files.

affects: >=2.0.0

Errors

Common errors & fixes

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

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.

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

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.

TypeError: SVG is not a constructor

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.

SVG element not rendered; svg tags missing attributes

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

Upgrade

Version history

2.3.0latest on npm

Audit

Dependencies

svelterequiredpeer dependency, required at runtime to render Svelte components

viterequiredpeer dependency, plugin for Vite's build system

svgooptionalused to optimize SVGs during transformation

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/metafy-gg/vite-plugin-svelte-svg ↗

packagehttps://www.npmjs.com/package/vite-plugin-svelte-svg ↗