#Import svg

36 messages · Page 1 of 1 (latest)

sinful cove
#

Hi, I use esbuild-plugin-svgr.
I would like to use Reactcomponent to import svg.
I set plugins: [ svgr({namedExport: 'ReactComponent'}), ], but still get warning issue


    src/Index.tsx:5:9:
      5 │ import { ReactComponent as US } from ...
        ╵          ~~~~~~~~~~~~~~```
dusty saffron
#

!hb declarations

#

wait no

#

!hb module declarations

#

ah

#

!hb wildcard module

#

unfortunate

sinful cove
#

I don't inderstand

little mortar
#

you can make a file like this one:

#

(ignore the rest of the repository, it's just a project I collaborate on)

#

in that file the *.inline.svg module declares that all files ending with .inline.svg will export a component as the default export, and the *.svg module declares that all files ending with just .svg will return a string as default export.

#

in your case it should probably be like this instead:

declare module "*.svg" {
    import { ComponentType } from "react"

    export const ReactComponent: ComponentType
}
#

this is an ambient declaration so you just need to place it in a location in your project folder where it gets picked up by the include config in your tsconfig

#

@sinful cove

sinful cove
#

It works for tsc

#

But not for esbuild

dusty saffron
#

oh weird

dusty saffron
sinful cove
sinful cove
#

@dusty saffron

dusty saffron
sinful cove
dusty saffron
#

yknow what though

#

better question: do you even really need svgr

sinful cove
#

Yes

#

I can load svg from tsc but not from esbuild, when creating bundle

#

Maybe It's better to delete Reactcomponent ?

little mortar
#

is there a reason the default export wouldn't work for you?

#

Because if using the default export works just as well I wouldn't bother dealing with this clearly poorly supported namedExport feature

sinful cove
#

I finally fixed my issue

#

Tsc and esbuild can import both my svg

#

I remove ReactComponent

dusty saffron
#

very weird that namedExport didnt work

#

or maybe it did?