Vue 3 / Vite: Imports are generated for excluded external SVG file

Question

I have a Vue 2 app that I am upgrading to Vue 3. JavaScript Imports are incorrectly being generated for .svg files that have been marked as external resources. This causes an error when the browser tries to load the files as JavaScript Modules.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/svg+xml". Strict MIME type checking is enforced for module scripts per HTML spec.

I am using the icons like so in my .vue file:

<svg alt="Apps">
  <use xlink:href="/img/icons/icons.svg#app" />
</svg>

This line of code is generated:

import pe from "/img/icons/icons.svg";

In my Vite config, I specifically have that file called out as an external resource:

  external: [            
    'icons.svg', 
    '/img/icons/icons.svg',
    'bootstrap'
  ],       

What else do I need to make it so that external resources are not loaded as modules?

Work Around

Instead of xlink:href="/img/icons/icons.svg#app" I use :xlink:href="'/img/icons/icons.svg#app'". I feel like it is a bit of a hack and I should be able to tell vue-tsc to treat it like a normal string