"ReactComponent" is not exported after update to 4.0.0

[jewe11er]

Hi! I'm using import { ReactComponent as ArrowDown } from './ArrowDown.svg'. Everything was okay before update to 4.0.0. Now I get an error:
RollupError: "ReactComponent" is not exported by "src/libs/icons/thin/ArrowDown.svg", imported by "src/libs/icons/index.ts".
How can I resolve it?

[Tbaut]

Can confirm, there's a quick fix though now that it's the default export.

- import {ReactComponent as Close} from './close.svg'
+ import Close from './close.svg?react'

[lnhrdt]

I just ran into this as well. Thanks for the tip @Tbaut.

@pd4d10 I see a breaking change on the 4.0.0 releases tag but the only explanation is "Export as default with query" with a link to the commit. It's a little hard to understand the intention of the change as it relates to the named ReactComponent export. Was it a mistake to remove the named export? Or is the only option for accessing the react component going forward to use the default export with the query?

[pd4d10]

@lnhrdt Hi, sorry, the release log might not be that clear.

Background here: #71 (comment)

[lnhrdt]

Got it @pd4d10! Thank you for the clarification, and for maintaining this library. 🍻

[binaryartifex]

has anyone got this working in the context of an NX monorepo? Ive got library-a, with a bunch of svg's, imported into a barrel index that is the entry point for the lib thats consumed by app-a. following suggestions mentioned here and it just flat refuses to work

[tcdw]

If you are using WebStorm and has a lot of SVG icons to migrate, you can mass-replace all of them with regex mode enabled.

From:

\{ ReactComponent as (.+) } from (.+).svg

To:

$1 from $2.svg?react

[JodyAndrews]

has anyone got this working in the context of an NX monorepo? Ive got library-a, with a bunch of svg's, imported into a barrel index that is the entry point for the lib thats consumed by app-a. following suggestions mentioned here and it just flat refuses to work

Did you get this working? I'm having the same issue

[ZebraFlesh]

Same issue with an nx monorepo, I keep getting errors like:

 >  NX   [vite]: Rollup failed to resolve import "@my-compant/assets/svg/logo.svg?react" from "/Users/me/git/my-project/layout/src/LayoutLogo/LayoutLogo.tsx".

I tried to make a minimum viable repo, but my nx skills are not up to task.

[JodyAndrews]

In regards to NX. I think this started failing in commit: 18a4e26

Overriding the include back to what it was seems to be working for me

import svgr from 'vite-plugin-svgr'

export default defineConfig({
...
plugins: [
svgr({ include: '**/*.svg' })
]

})