无法使用 Vite 将 SVG 导入为 ReactComponent

Question

像这样导入它没有成功：

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

这个问题有解决办法吗？

我之前得到的错误如下：

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'

Answer 1

使用 vite-plugin-svgr

将SVGR添加到项目

yarn add -D @honkhonk/vite-plugin-svgr

添加插件SVGR在vite.config.js

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

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

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

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

<Happy />

您可以在 https://react-svgr.com/docs/ecosystem/#articles

找到有关 SVGR 的更多信息

Answer 2

任何对已接受的答案有疑问的人，请尝试此包中描述的解决方案： https://www.npmjs.com/package/vite-plugin-svgr

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

出于某种原因，我无法使用已接受的答案进行构建

无法使用 Vite 将 SVG 导入为 ReactComponent

Unable to import SVG with Vite as ReactComponent

reactjs

typescript

vite