# vite-svg-loader

> Vite plugin to load SVG files as Vue components

Latest version **5.1.3** (published 2026-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-svg-loader
pnpm add vite-svg-loader
yarn add vite-svg-loader
bun add vite-svg-loader
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 5.1.3 |
| Published | 2026-09-01 |
| First published | 2021-01-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 701 |
| Author | Jan-Paul Kleemans |
| Maintainers | jpkleemans |
| Keywords | vite-plugin, vite, vue, svg |

## Links

- npm: https://www.npmjs.com/package/vite-svg-loader
- Repository: https://github.com/jpkleemans/vite-svg-loader
- Homepage: https://github.com/jpkleemans/vite-svg-loader#readme
- Issues: https://github.com/jpkleemans/vite-svg-loader/issues
- npm.io page: https://npm.io/package/vite-svg-loader

## Dependencies (2)

- [svgo](https://npm.io/package/svgo.md) ^3.3.5
- [debug](https://npm.io/package/debug.md) ^4.3.4

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 5.1.3 (latest) — 2026-09-01
- 5.1.2 — 2026-08-26
- 5.1.1 — 2026-03-05
- 5.1.0 — 2023-11-20
- 5.0.1 — 2023-11-17
- 5.0.0 — 2023-11-17
- 4.0.0 — 2022-12-24
- 3.6.0 — 2022-09-07
- 3.5.1 — 2022-09-01
- 3.5.0 — 2022-08-31
- 3.4.0 — 2022-06-16
- 3.3.0 — 2022-04-24
- 3.2.0 — 2022-03-30
- 3.1.2 — 2022-01-11
- 3.1.1 — 2021-12-09
- … 21 more at https://npm.io/package/vite-svg-loader/versions

## README

# Vite SVG loader
Vite plugin to load SVG files as Vue components, using SVGO for optimization.

<a href="https://www.npmjs.com/package/vite-svg-loader" target="_blank"><img src="https://img.shields.io/npm/v/vite-svg-loader?style=flat-square" alt="Version"></a>
<a href="https://www.npmjs.com/package/vite-svg-loader" target="_blank"><img src="https://img.shields.io/npm/dw/vite-svg-loader?style=flat-square" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/vite-svg-loader" target="_blank"><img src="https://img.shields.io/npm/l/vite-svg-loader?style=flat-square" alt="License"></a>

```vue
<template>
  <MyIcon />
</template>

<script setup>
import MyIcon from './my-icon.svg'
</script>
```

### Install
```bash
npm install vite-svg-loader --save-dev
```

### Setup

#### `vite.config.js`
```js
import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [vue(), svgLoader()]
})
```

### Import params
### URL
SVGs can be imported as URLs using the `?url` suffix:
```js
import iconUrl from './my-icon.svg?url'
// 'data:image/svg+xml...'
```

### Raw
SVGs can be imported as strings using the `?raw` suffix:
```js
import iconRaw from './my-icon.svg?raw'
// '<?xml version="1.0"?>...'
```

### Component
SVGs can be explicitly imported as Vue components using the `?component` suffix:
```js
import IconComponent from './my-icon.svg?component'
// <IconComponent />
```

### Default import config
When no explicit params are provided SVGs will be imported as Vue components by default.
This can be changed using the `defaultImport` config setting,
such that SVGs without params will be imported as URLs (or raw strings) instead.

#### `vite.config.js`
```js
svgLoader({
  defaultImport: 'url' // or 'raw'
})
```

### SVGO Configuration
#### `vite.config.js`
```js
svgLoader({
  svgoConfig: {
    multipass: true
  }
})
```

### Disable SVGO
#### `vite.config.js`
```js
svgLoader({
  svgo: false
})
```

### Skip SVGO for a single file
SVGO can be explicitly disabled for one file by adding the `?skipsvgo` suffix:
```js
import IconWithoutOptimizer from './my-icon.svg?skipsvgo'
// <IconWithoutOptimizer />
```

### Use with TypeScript
If you use the loader in a Typescript project, you'll need to reference the type definitions inside `vite-env.d.ts`:
```ts
/// <reference types="vite/client" />
/// <reference types="vite-svg-loader" />
```

## Sponsors

<a href="https://www.nexxtmove.nl/" target="_blank">
  <img src="https://raw.githubusercontent.com/jpkleemans/attribute-events/gh-pages/nexxtmove-logo.svg" alt="Nexxtmove Logo" width="200">
</a>

Thanks to <a href="https://www.nexxtmove.nl/" target="_blank">Nexxtmove</a> for sponsoring the development of this project.  
Your logo or name here? [Sponsor this project](https://github.com/sponsors/jpkleemans).

---
_Source: https://npm.io/package/vite-svg-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._