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

vite-plugin-svelte-svgr

library1.0.4jsnpmunverified

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.

web-framework

npm install vite-plugin-svelte-svgr

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SVELTE

vite-plugin-svelte-svgr

web-frameworkjavascriptv1.0.4

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.

default

✓ import svgr from 'vite-plugin-svelte-svgr'

✗ import { svgr } from 'vite-plugin-svelte-svgr'

Default export only. Named import will fail.

SvgComponent

✓ import Icon from './icon.svg'

✗ import Icon from './icon.svg?component'

Default import yields SvelteComponent unless overridden by config. Query param ?component explicitly forces component import. TypeScript: declare module '*.svg' { ... }.

SvgType

✓ import type {} from 'vite-plugin-svelte-svgr'

No explicit type exports; TypeScript declarations augment SVG module types automatically.

Configures vite-plugin-svelte-svgr in SvelteKit (v1.0.0-next.346+) and imports SVG as a Svelte component.

// vite.config.js import { sveltekit } from '@sveltejs/kit/vite'; import svgr from 'vite-plugin-svelte-svgr'; export default { plugins: [sveltekit(), svgr()] }; // App.svelte <script> import Logo from './logo.svg'; </script> <Logo />

Debug

Known issues

gotchaSvelteKit versions before 1.0.0-next.346 require plugin configuration in svelte.config.js (kit.vite.plugins) instead of vite.config.js.

fix

Move plugin config to svelte.config.js under kit.vite.plugins array.

affects: <1.0.0-next.346

deprecatedThe include/exclude pattern uses Rollup's createFilter; paths must be relative to project root. Using absolute paths may break.

fix

Use relative paths like 'src/lib/icons' or globs like 'src/**/*.svg'.

affects: >=1.0.0

gotchaDefault SVGO preset may remove viewBox; icons appear broken. The preset-default removeViewBox is true by default.

fix

Configure SVGO to preserve viewBox: { svgo: { plugins: [{ name: 'preset-default', params: { overrides: { removeViewBox: false } } }] } }.

affects: >=1.0.0

breakingNo version 2 changes yet; note that plugin is early-stage and may undergo breaking changes without major semver bump.

fix

Pin exact version and test upgrades carefully.

affects: >=1.0.0

Errors

Common errors & fixes

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

Plugin not installed or devDependencies not installed.

fix

Run `npm install vite-plugin-svelte-svgr -D`

TypeError: svgr is not a function

Named import instead of default import.

fix

Use `import svgr from 'vite-plugin-svelte-svgr'` instead of `import { svgr } from ...`

The requested module 'vite-plugin-svelte-svgr' does not provide an export named 'default'

Using ESM in a CommonJS context (older Node or wrong module type).

fix

Ensure `"type": "module"` in package.json or use .mjs extension for config.

Upgrade

Version history

1.0.4latest on npm

Audit

Dependencies

svelterequiredRuntime peer dependency for processing Svelte components

viterequiredBuild tool peer dependency; plugin lifecycle hooks

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/blujedis/vite-plugin-svelte-svgr ↗

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