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

vite-plugin-svg-loader

library1.0.0jsnpmunverified

A Vite plugin for loading SVG files as objects or raw strings, enabling easy manipulation and embedding of SVGs in Vite-based projects. Current stable version is 1.0.0, released for Vite 2.x. It differs from alternatives like vite-svg-loader by providing query parameters (?row, ?url) for raw or URL import modes. The plugin exports SVG files as parsed JSON objects (tag, attrs, children) by default, which is useful for custom rendering. Requires Vite >2.0.0-0 as a peer dependency and ships TypeScript types.

web-framework

npm install vite-plugin-svg-loader

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SVG-LO

vite-plugin-svg-loader

web-frameworkjavascriptv1.0.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.

default (svgLoader)

✓ import svgLoader from 'vite-plugin-svg-loader'

✗ const svgLoader = require('vite-plugin-svg-loader')

ESM-only; CommonJS require will fail.

SVG file (default import)

✓ import svgData from './icon.svg'

✗ import svgData from 'vite-plugin-svg-loader!./icon.svg'

Default import returns a parsed JSON object. The ! syntax is for webpack, not Vite.

SVG file (?raw)

✓ import rawSvg from './icon.svg?raw'

✗ import rawSvg from './icon.svg?row'

The query parameter is ?raw (not ?row, despite README typo). From version 1.0.0, use ?raw.

SVG file (?url)

✓ import svgUrl from './icon.svg?url'

✗ import svgUrl from './icon.svg?file'

Returns the URL of the SVG file (default Vite asset behavior).

Shows basic setup in vite.config.ts and three import variants: default parsed object, raw string, and URL.

// vite.config.ts import { defineConfig } from 'vite' import svgLoader from 'vite-plugin-svg-loader' export default defineConfig({ plugins: [svgLoader()] }) // component.ts import icon from './icon.svg' console.log(icon) // { tag: 'svg', attrs: { viewBox: '...' }, children: [...] } import raw from './icon.svg?raw' console.log(raw) // <svg ...>...</svg> import url from './icon.svg?url' console.log(url) // /assets/icon.abc123.svg

Debug

Known issues

gotchaThe query parameter ?row from the README typo does not exist. Use ?raw instead.

fix

Use import rawSvg from './icon.svg?raw'

affects: >=0.0.0

breakingPlugin is designed for Vite 2.x only. Using with Vite 3+ may cause undefined behavior.

fix

If using Vite 3+, consider vite-svg-loader or upgrade the plugin if a new version is released.

affects: 1.0.0

gotchaDefault import returns a parsed JSON object, not the SVG string. Developers expecting a string may get an object as a string representation [object Object].

fix

Use the ?raw query to get the raw SVG string, or convert the object to string manually.

affects: >=0.0.0

Errors

Common errors & fixes

Module '"vite-plugin-svg-loader"' has no exported member 'default'. Did you mean to use 'import svgLoader from "vite-plugin-svg-loader"' instead?

Using TypeScript with allowSyntheticDefaultImports: false or importing as { svgLoader }.

fix

Use import svgLoader from 'vite-plugin-svg-loader' (default import).

Unknown plugin: 'vite-plugin-svg-loader'

Plugin not found because it's not installed or path is incorrect.

fix

Install the plugin: npm install --save-dev vite-plugin-svg-loader

Invalid query parameter '?row'. Only ?raw and ?url are supported.

Using the typo ?row from the README.

fix

Change to ?raw.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

viterequiredPeer dependency: the plugin requires Vite >=2.0.0-0 to function as a Vite plugin.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/zch233/vite-plugin-svg-loader ↗

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