youngpirate32 / vite-svg-loader

Vite 2.x plugin to load SVG files as Vue components

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 {
  plugins: [vue(), svgLoader()]
}

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 add the type definitions to src/vite-env.d.ts:

src/vite-env.d.ts

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