No matching export in in svg file.

[hannadrehman]

i am trying to import svg file like this

import { ReactComponent as ActivityIcon } from './pathToActivityIcon'

and it gives following error

 error: No matching export in "/pathToSvgFile.svg" for import "ReactComponent"
 import { ReactComponent } from '.pathToSvgFile.svg'

[kazijawad]

Hi, could you provide a code reference I could take a look at?

[hannadrehman]

@kazijawad i am trying to use it like its implemented in create react app . its mentioned here in their docs

import { ReactComponent as Logo } from './logo.svg';

function App() {
  return (
    <div>
      {/* Logo is an actual React component */}
      <Logo />
    </div>
  );
}

[kazijawad]

Have you tried import Icon from './icon.svg';? If there is a repository I can look at that would be helpful.

[kazijawad]

Closing this issue because of inactivity.

[RIP21]

@kazijawad default export works indeed. But most of the SVGR exports I saw generated by Webpack integration and Rollup integration generates a named export of ReactComponent
So import aDefault from './smth.svg' will give you a URL to a file to access or a base64 URL.
But import { ReactComponent } from './smth.svg' gives what your plugin gives now. So people that are looking for svgr plugin for esbuild look exactly for that UX and not the one you provide I think, maybe not by default, but at least some hint in the README :)
I want the same :)

[kazijawad]

@RIP21 Ah I see — yes this is currently possible with the SVGR API. It can be passed into the plugin options like this:

svgrPlugin({ exportType: 'named' })

It looks like the hosted SVGR documentation doesn't include all the possible options 😕
I tested it myself and was able to get import { ReactComponent } working. The named export can also be changed with the namedExport field. It might be useful to reference the SVGR source code.