vite-plugin-svelte-svgr

1.0.4 verified Mon Apr 27 auth: no javascript

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.

Common errors

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

cause Plugin not installed or devDependencies not installed.

fix

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

error TypeError: svgr is not a function ↓

cause Named import instead of default import.

fix

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

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

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

Warnings

gotcha SvelteKit 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.

deprecated The 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'.

gotcha Default 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 } } }] } }.

breaking No 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.

Install

npm install vite-plugin-svelte-svgr

yarn add vite-plugin-svelte-svgr

pnpm add vite-plugin-svelte-svgr

Imports

default

wrong

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

correct

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

Default export only. Named import will fail.

SvgComponent
wrong
```
import Icon from './icon.svg?component'
```
correct
```
import Icon from './icon.svg'
```
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.

Quickstart

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