安装此软件包后，我解决了此问题：
npm i vite-plugin-svgr

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr'; // make sure to import it

export default defineConfig({
    plugins: [react(), svgr()],
});

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

<ExternalLink />

您可以通过像这样导入并赋值给img来避免svgr

import logo from "./logo-login.svg"
<img src={logo} className="w-24 inline-block" alt="logo" />

yarn add -D vite-plugin-svgr将是最好的选择，因为它一直在维护。
第一个
也可以通过在vite.config.js中设置此配置选项作为默认值导入。
第一次
但请注意，它将覆盖Vite的默认行为，即默认导出URL。
如果您有任何类型脚本问题，还有一个声明帮助器可用于更好地进行类型推断

/// <reference types="vite-plugin-svgr/client" />

👉 使用vite-plugin-svgr
1.将SVGR添加到项目中
yarn add -D @honkhonk/vite-plugin-svgr
1.在vite.config.js中添加插件SVGR以进行vite

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from '@honkhonk/vite-plugin-svgr'

export default defineConfig({
  plugins: [ svgr(), react()]
})

1.在App.tsx中，通过在svg的import指令上添加?component，将SVG作为React组件导入：

import Happy from './assets/svg/happy.svg?component'

<Happy />

您可以在www.example.com上找到有关SVGR的更多信息https://react-svgr.com/docs/ecosystem/#articles

任何人如果对已接受的答案有疑问，请尝试此软件包中描述的解决方案：https://www.npmjs.com/package/vite-plugin-svgr
import { ReactComponent as Logo } from './logo.svg'
由于某种原因，我无法使用已接受的答案进行构建

你应该使用@svgr/rollup而不是vite-plugin-svgr。vite-plugin-svgr不是一个好的选择，因为它不支持svgo，并且它使用esbuild来转换一些svg代码，它在es5环境中可能会有一些问题。
最糟糕的是vite-plugin-svgr无法添加svgo插件，参见本期：是的。
第一个