vite-plugin-vue-svg

vite-plugin-vue-svg

Extend Vite with ability to use SVG files as Vue components.

Features:

• SVGO optimization
• Hot Module Replacement support
• Support for ?url and ?component query string

Currently supported Vite version:

2.0.0-beta.61

Install

yarn add --dev vite-plugin-vue-svg @vue/compiler-sfc

npm i -D vite-plugin-vue-svg @vue/compiler-sfc

Setup

// vite.config.js
const vue = require('@vitejs/plugin-vue');
const vueSvgPlugin = require('vite-plugin-vue-svg');

module.exports = {
  plugins: [
    vue(),
    vueSvgPlugin(),
  ],
};

Options

vueSvgPlugin({
  // Default behavior when importing `.svg` files, possible options are: 'url' and `component`
  defaultExport: 'url',

  // SVGO configuration object
  svgoConfig: {},
})

Usage

<template>
  <div>
    <MyIcon />
  </div>
</template>
<script>
import MyIcon from './svgs/my-icon.svg?component';

export default {
  components: {
    MyIcon,
  },
};
</script>