vite-plugin-svg-import

Vite plugin to load SVG files as Vue components, URLs or raw strings

Install

Using npm:

npm i --save-dev vite-plugin-svg-import

Using pnpm:

pnpm add -D vite-plugin-svg-import

Usage

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginSvgImport from 'vite-plugin-svg-import'

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

Then import the SVG file as an ordinary JavaScript module:

<script setup>
import VueLogo from './assets/vue.svg'
// or with explicit indication of the import type
// import VueLogo from './assets/vue.svg?component'
</script>

<template>
  <VueLogo></VueLogo>
</template>

There are several types of imports here:

component

• Loads SVG as if it were a Vue component.

raw

• Raw utf8 encoded string.

url

• URL-compatible string.

Each import type has an alias consisting of the first letter of the import type. For example, component will have alias c.

Options

defaultImportType

• Type: String
• Values: 'url' | 'raw' | 'component'
• Default: 'component'

Specifies how the SVG is imported without explicitly specifying the import type.

Meta

LICENSE (MIT)