Search code examples
reactjstypescriptvite

Unable to import SVG with Vite as ReactComponent

Tried to use this library: vite-plugin-react-svg

and had no success by importing it like:

import { ExternalLink } from 'assets/svg/link-external.svg?component';

Are there any workarounds for this issue?

The error i got before was the following:

import { ReactComponent as ExternalLink } from 'assets/svg/link-external.svg';

//Uncaught SyntaxError: 
  The requested module '/src/assets/svg/link-external.svg?import'
  does not provide an export named 'ReactComponent'
Solution

  • Anyone having issues with the accepted answer, try the solution described in this package: https://www.npmjs.com/package/vite-plugin-svgr

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

    For some reason, I couldn't build using the accepted answer