I am trying to create a plugin for Vite.js & Vue.js 2.7.x to import SVG files in my project. I want Vite to import them as .vue components and not as static assets. Existing Vite plugin (vite-svg-loader) does not support Vue.js 2.x.x
My Component.vue imports and utilizes an SVG file as follows:
<template>
<div>
<my-icon/>
</div>
</template>
<script>
import MyIcon from "@some_path/my-icon.svg";
export default {
components: {
MyIcon
}
};
</script>
My Vite plugin currently contains this code:
function svgLoader() {
return {
name: "svg-loader",
load: function(id) {
console.log(id);
/* Some logic here to convert SVGs into Vue components */
}
}
}
console.log(id) produces paths to html, scss, vue and js files only. I think Vite treats SVG files as static assets, it simply copies them to the assets folder as follows: assets/my-icon.7f263221.svg. What can I do to get SVG files in my load function?