How to dynamically introduce it after version 4.0

[qiaogaolong]

How to dynamically introduce it after version 4.0？

[alexbaulch]

I am also getting unexpected behaviour when trying to dynamically import. The import returns a path string instead of a React component.

I was playing with a stack blitz from this article that was demoing how to work with vite/svgr and dynamic imports. It references an outdated version of this plugin so I forked the dynamic import stack blitz and updated all the packages. As you can see in this minimal repro the plugin appears to be returning a path string to the component instead of a React component which causes React to blow up.

Stack blitz

[brazillierjo]

I'm also having errors since version 4. My test with vitest returns this error on all my tests that contains a component SVG :

'Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s'

No problem on version 3.

[SetupCoding]

Same issue here. Dynamic imports do not work as described by @alexbaulch

[pd4d10]

I am also getting unexpected behaviour when trying to dynamically import. The import returns a path string instead of a React component.

It seems caused by the iconName variable, which can't be determined at compile time.

Is this kind of usage working at v3.0?

[trungpham71198]

I fixed the above problem by:

vite.config.ts

useDynamicSvg.ts

I hope my way will help you!!!

[xsjcTony]

@pd4d10 Yes, it's working before v4. The v4 change breaks the dynamic import. The imported value is the path handled by vite instead of the React component by this plugin, even ?react is added at the end of the string.

Regarding @trungpham71198 's solution, I can't take it since I sometimes still use the normal .svg import to avoid the React component wrapper by this plugin.

This critical is preventing me from upgrading to Vite 5, since it's only supported in v4.2.0 of this plugin.

Please have a look into it, cheers. 💚

[eMerzh]

Just to add my 2 cents it' no solutions seems to work in vitev5
and it's outputing error about missing loader

like here https://stackblitz.com/edit/vitejs-vite-fz5lgu?file=src%2FSvgIcon.tsx,package.json

[publicJorn]

Still a work-around, but if you still want to import normal svg's you can change the file name of svg's you do want to be picked up by svgr and change the include option accordingly:

• icons/name.svgr.svg (added .svgr to the name)

In vite config:

svgr({
  include: '**/*.svgr.svg'
})

Then your import should also append .svgr so, something like:

await import(`path/to/${iconName}.svgr.svg`)

[xsjcTony]

Any official fix on this please? @pd4d10

[xsjcTony]

This issue is preventing me from upgrading to Vite5 😭

[arielmints]

Same issue for me, can't dynamically import SVGs after upgrading to version 4 :(

[qinhua]

我通过以下方式解决了上述问题：

vite.config.ts

useDynamicSvg.ts

希望我的方法对你有帮助！！！

Invalid in versions after 3.3.0

[xsjcTony]

Any updates?

[VikomiC]

@trungpham71198

I hope my way will help you!!!

Thanks for your advice. For me it worked partially.
I have dynamic SVGs and usual SVGs.
Issue was solved with usual SVGs when import with "?react". But it was not worked for dynamic.
Then I found, that after some configuration changes dynamic imports started to work, but usual SVG started to show errors about props.

So, I went to vite.config.ts and added 2 types of imports:

export default defineConfig({
  ...
  plugins: [
    ...
    // svgr options: https://react-svgr.com/docs/options/
    svgr({
      svgrOptions: { icon: true },
      include: ['**/*.svg', '**/*.svg?react'],
      exclude: [],
    }),
    ...
  ],
  ...
});

This works for me.