unplugin-svg-vue-component

Use SVG as vue components with support for both vue2.7 and vue3.x.

npm i -D unplugin-svg-vue-component

Usage

Vite

import svgPlugin from 'unplugin-svg-vue-component/vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

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

<script setup lang="ts">
import MsgIcon from './msg.svg'

// OR
// import MsgIcon from './msg.svg?component'
</script>

<template>
  <MsgIcon />
</template>

Options

• optimize: Disabled by default. Based on svgo

// https://github.com/svg/svgo
export default defineConfig({
  plugins: [
    vue2(),
    svgPlugin({ optimize: true }),
  ],
})

Used in TypeScript

First tsconfig configuration

{
  "compilerOptions": {
    "types": ["unplugin-svg-vue-component/client"]
  }
}

Then import the SVG using the following form to avoid ts errors

import MsgIcon from './msg.svg?component'

Acknowledgement

Integration of the following schemes

• vite-svg-loader

• vite-plugin-vue2-svg

License

MIT