vite-plugin-svg-loader

1.0.0 verified Mon Apr 27 auth: no javascript

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.

Common errors

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

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

fix

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

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

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

fix

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

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

cause Using the typo ?row from the README.

fix

Change to ?raw.

Warnings

gotcha The query parameter ?row from the README typo does not exist. Use ?raw instead. ↓

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

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

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

Install

npm install vite-plugin-svg-loader

yarn add vite-plugin-svg-loader

pnpm add vite-plugin-svg-loader

Imports

default (svgLoader)

wrong

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

correct

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

ESM-only; CommonJS require will fail.

SVG file (default import)
wrong
```
import svgData from 'vite-plugin-svg-loader!./icon.svg'
```
correct
```
import svgData from './icon.svg'
```
Default import returns a parsed JSON object. The ! syntax is for webpack, not Vite.
SVG file (?raw)
wrong
```
import rawSvg from './icon.svg?row'
```
correct
```
import rawSvg from './icon.svg?raw'
```
The query parameter is ?raw (not ?row, despite README typo). From version 1.0.0, use ?raw.
SVG file (?url)
wrong
```
import svgUrl from './icon.svg?file'
```
correct
```
import svgUrl from './icon.svg?url'
```
Returns the URL of the SVG file (default Vite asset behavior).

Quickstart

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