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" />