Rollup svgr + url plugin not exporting ReactComponent

In the docs there’s an example of the rollup url plugin + @svgr/rollup, but I can’t seem to get it working properly. I put together a gist to demonstrate the issue. I’ll summarize below:

• SVGR version - 5.4.0
• Rollup Version: 2.23.1

Rollup Config:

import svgr from '@svgr/rollup';
import url from '@rollup/plugin-url';

export default {
	input: './src/index.js',
	output: {
		file: './build/index.js',
		format: 'esm'
	},
	external: ['react'],
	plugins: [
		url(),
		svgr(),
	]
}

Index:

import air_play from './icons/airplay.svg';

export { air_play };

When I build I’m seeing this:

import 'react';

var airplay = "data:image/svg+xml,%3Csvg%20%20xmlns%3D%22..."; // clipped text

export { airplay as air_play };

Based on the docs I’d expect to see something like:

import { createEement } from 'react';

function SvgAirPlay() { ... } // generated from svgr

var airplay = "data:image/svg+xml,%3Csvg%20%20xmlns%3D%22..."; // clipped text

export default airplay;
export { SvgAirPlay as ReactComponent };

[davidgarsan]

Getting the same error here from rollup build @atomicpages : [!] Error: 'ReactComponent' is not exported by src/assets/images/plus.svg, imported by src/assets/images/icons.ts Same stack, latest versions, as @o-mega: @rollup/plugin-typescript + @svgr/rollup

Any updates?

[rmjwilbur]

The following worked for me in rollup.config.js:

svgr({ exportType: 'named', jsxRuntime: 'automatic' }),