Include all SVG files, without the ?react doesn't work

[sanjarcode]

Can we omit the need to add ?react at the end of every SVG import?

Current situation

// works

export default defineConfig({
  plugins: [react(), svgr()], // no params
  base: `/${viteBaseName}/`,
});

import MyIcon from "../MyIcon.svg?react";   //  has `?react`

<MyIcon /> // works

Goal situation

I used the include option in vite.config.js, but that didn't work:

// this doesn't works
export default defineConfig({
  plugins: [
    react(),
    svgr({
      include: "**/*.svg", // params
    }),
  ],
  base: `/${viteBaseName}/`,
});

import MyIcon from "../MyIcon.svg";  // no `?react`
<MyIcon /> // doesn't work

/*
DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/vite-react-js-template/src/MyIcon.svg') is not a valid name
*/

How to fix this? I think some default parameters may be missing in this second case. If yes, can we use callback pattern such the callback returns the default param, and I can selectively set include while retaining the rest.

[theonastos]

@sanjarcode Any luck here?

[mariedevweb]

Try adding in your vite.config.ts, this allowed me to include my svg file without the ?react
plugins: [react(), svgr({ include: '**/*.svg' })],

[lazaro9318]

Try adding in your vite.config.ts, this allowed me to include my svg file without the ?react plugins: [react(), svgr({ include: '**/*.svg' })],

This works like a charm, thank you!