vite-plugin-vue-svg

Vite plugin to use svg files as Vue components.

Requirements

• Vite 2.*
• Vue 3.*

Installation

npm i -D @vuetter/vite-plugin-vue-svg

Usage

vite.config.js:

import pluginVue from '@vitejs/plugin-vue';
import pluginSvgVue from '@vuetter/vite-plugin-vue-svg';

export default {
    plugins: [
        pluginVue(),
        pluginSvgVue(),
    ],
};

Any vue component:

<template>
    <h1>Icons</h1>
    <IconExample />
</template>

<script>
import IconExample from '/~/assets/icon-example.svg?inline';
export default {
    components: { IconExample },
};
</script>

You can specify html element to wrap svg:

pluginSvgVue({
    htmlWrapper: {
        tagName: 'span',
        attrs: {
            class: 'ui-icon',
        },
    },
})

To configure svgo optimization:

pluginSvgVue({
    svgo: { ... }, // https://github.com/svg/svgo#configuration
})

or set svgo: false to disable optimization.