Issue with Importing SVGs: "Does not provide an export named 'ReactComponent'"

[semihtarik]

I am encountering an issue while trying to import SVG files as React components in my Vite + React + TypeScript project. Despite following the documentation and proper configuration, I receive the following error:

javascript Kodu kopyala Uncaught SyntaxError: The requested module '/src/assets/chute-icon.svg?import' does not provide an export named 'ReactComponent' Here are the steps I followed:

Installed the necessary packages:

vite @vitejs/plugin-react vite-plugin-svgr Updated vite.config.ts:

typescript Kodu kopyala import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import svgr from 'vite-plugin-svgr';

export default defineConfig({ plugins: [ react(), svgr({ svgrOptions: { icon: true, }, }), ], }); Created vite-env.d.ts:

typescript Kodu kopyala /// /// Tried to import the SVG as a React component in CustomIcons.tsx:

typescript Kodu kopyala import React from 'react'; import { ReactComponent as ChuteIcon } from '../assets/chute-icon.svg';

const icons = { chute: ChuteIcon, };

type IconProps = { name: keyof typeof icons; width?: string; height?: string; fill?: string; };

const CustomIcons: React.FC = ({ name, width = '24px', height = '24px', fill = 'currentColor' }) => { const Icon = icons[name];

if (!Icon) { return null; }

return (

); };

export default CustomIcons;

I have ensured that the SVG file paths are correct and that the SVG files contain valid SVG content. Despite this, the error persists.

[shuaiqidekaige]

use .svg?react to resolve it