Vite SVG loader

Vite 2.x plugin to load SVG files as Vue components, using SVGO for optimization.

<template>
  <MyIcon />
</template>

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

Install

npm install vite-svg-loader --save-dev

Setup

vite.config.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:

import iconUrl from './my-icon.svg?url'
// '/assets/my-icon.2d8efhg.svg'

Raw

SVGs can be imported as strings using the ?raw suffix:

import iconRaw from './my-icon.svg?raw'
// '<?xml version="1.0"?>...'

Component

SVGs can be explicitly imported as Vue components using the ?component suffix:

import IconComponent from './my-icon.svg?component'
// <IconComponent />

SVGO Configuration

vite.config.js

svgLoader({
  svgoConfig: {
    multipass: true
  }
})

Disable SVGO

vite.config.js

svgLoader({
  svgo: false
})

Use with TypeScript

If you use the loader in a Typescript project, you'll need to import your svg files with the ?component param: import MyIcon from './my-icon.svg?component'.

You'll also need to reference the type definitions:

/// <reference types="vite-svg-loader" />