v0.4.0

Important note

This is a release with a breaking change, please read the notes below to understand how to migrate from vite-plugin-svg@0.3.0+.

New way of importing SVGs as Vue components

Before v0.4.0 you would add ?component query string at the end of the file path to import an SVG file. This caused a few issues with Rollup and Jest, as they do not support (yet?) query strings in the file paths. Starting from v0.4.0 you will have access to both SVG file URL and Vue component using a single import statement:

import myIconUrl, { VueComponent as MyIcon } from './svgs/icon.svg';

console.log(myIconUrl); // `/src/svgs/icon.svg`
console.log(MyIcon); // SVG as Vue component

In the example above you can see that there are two things exported by ./svgs/icon.svg:

1. Default export which returns URL to the file (handled by Vite)
2. Named export called VueComponent which returns the SVG file converted to a Vue component (handled by vite-plugin-svg)

Due credit: VueComponent name is inspired by @svgr/webpack (which uses ReactComponent).

Installing @vue/compiler-dom is no longer needed

vite-plugin-svg will now use @vue/compiler-sfc which you should already have installed as a devDependency in pair with vite.