Cant resolve path

[julius-spudvilas]

I have been at this all day but it seems that plugin cant resolve path correctly as per README.md

Clean new VITE project with VUE

Vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VitePluginSvgSpritemap from "@spiriit/vite-plugin-svg-spritemap";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), VitePluginSvgSpritemap("./src/svgIcons/*.svg")],
});

App.vue template

<template>
  <div>
    <svg>
      <use xlink:href="/__spritemap#sprite-circle-heat" />
    </svg>
  </div>
</template>

Console: 21.50.13 [vite] Internal server error: Failed to resolve import "/__spritemap" from "src/App.vue". Does the file exist?

Notes: "../__spritemap#sprite-circle-heat" works on DEV but then cant be resolved on BUILD as it becomes "../assets/spritemap.197f1118.svg"

[dsine-de]

Is there a workaround to make this plugin work with Vue.js?

[dsine-de]

If there was an option for the production build like injectSVGOnDev, we could just use <svg><use href="#sprite-myicon"/></svg>

[dsine-de]

A workaround seems to be adding the following option to the Vue.js plugin in vite.config.js:

plugins: [
    vue({
        template: {
            transformAssetUrls: {use: []}
        }
    })
    ...
]

Anyway it would be great to have an inline option or something like that, which disables the view and use output and just inlines the generated SVG into the index.html body so no additional request is needed to load the svg spritemap and to be able to use just <svg><use href="#sprite-myicon"/></svg> to reference the sprites.