Uncaught DOMException: Failed to execute 'createElement' on 'Document' when loading from public

I get this error when im trying to load a svg file as component from public/: Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/icons/moon.svg?component') is not a valid name.

My structure:

My env.d.ts:

/// <reference types="vite/client" />
/// <reference types="vite-svg-loader" />

My vite.config.ts:

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import svgLoader from 'vite-svg-loader'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), svgLoader()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Repo: https://github.com/Backifyco/backify-font-logo-finder

[luucasrb]

Having the same error here in production build.

[luucasrb]

In my case, I was using reserved JS/TS words for naming the svg’s objects, i.e: import Export from './export.svg?component'. So, I’ve changed it to snake case with suffix: import export_icon from './export.svg?component'