Vite dev build works perfectly; production build does not load raw SVGs

I have a Vue 2 + Vite project utilizing this plugin.

import svgLoader from 'vite-svg-loader'
...
svgLoader({
  defaultImport: 'raw'
})

When I run vite (or yarn dev) everything works fine and all svg assets are properly rendered.

When I build for production, the assets are instead loaded as a url (I think?) and just the asset path is outputted into the DOM

I can’t seem to put together a decent reproduction, but I’m happy to provide more info or pair as needed.

Click to expand more info

I also control the repository these icons are sourced from. That repository utilizes webpack and Vue 2, and includes a svg rule in the chainWebpack config like this:

svgRule.uses.clear()
svgRule
  .oneOf('external')
  .resourceQuery(/external/)
  .use('url')
  .loader('url-loader')
  .options({
    limit: 10000,
    name: 'img/[name].[hash:7].[ext]'
  }).end().end()
  .oneOf('normal')
  .use('raw')
  .loader('raw-loader')
  .end().end()

If you look above, this is where the asset URLs (with the hash) are being generated from; however, I can’t figure out how to get around this.

[kingyue737]

Does this plugin support vue 2? https://github.com/jpkleemans/vite-svg-loader/issues/10

[adamdehaven]

When I add ?raw to the JS imports/exports, I get an error from the build that it can’t find the modules, so that’s not an option (they come from a separate package)