unplugin-svg-vue-component

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

1npm i -D unplugin-svg-vue-component

Usage

Vite

1import svgPlugin from 'unplugin-svg-vue-component/vite'
2import vue from '@vitejs/plugin-vue'
3import { defineConfig } from 'vite'
4
5export default defineConfig({
6  plugins: [
7    vue(),
8    svgPlugin(),
9  ],
10})

1<script setup lang="ts">
2import MsgIcon from './msg.svg'
3
4// OR
5// import MsgIcon from './msg.svg?component'
6</script>
7
8<template>
9  <MsgIcon />
10</template>

Options

• optimize: Disabled by default. Based on svgo

1// https://github.com/svg/svgo
2export default defineConfig({
3  plugins: [
4    vue2(),
5    svgPlugin({ optimize: true }),
6  ],
7})

Used in TypeScript

First tsconfig configuration

1{
2  "compilerOptions": {
3    "types": ["unplugin-svg-vue-component/client"]
4  }
5}

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

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

Acknowledgement

Integration of the following schemes

• vite-svg-loader

• vite-plugin-vue2-svg

License

MIT