无法使用 Vite 作为 ReactComponent 导入 SVG答案

【问题标题】：Unable to import SVG with Vite as ReactComponent无法使用 Vite 作为 ReactComponent 导入 SVG
【发布时间】：2021-12-10 19:32:47
【问题描述】：

尝试使用这个库：vite-plugin-react-svg

并且通过像这样导入它没有成功：

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'

【问题讨论】：

标签： reactjs typescript vite

【解决方案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 的更多信息

【讨论】：

工作就像一个魅力，非常感谢你
虽然建议的特定插件版本对我不起作用，但这个版本可以：yarn add -D vite-plugin-svgr，结合以下语法：import { ReactComponent as Happy } from './assets/svg/happy.svg'。这实际上模拟了 react-scripts 的工作方式，并且可能对从 react-scripts 迁移到 vite 的任何人有用。

【解决方案2】：

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

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

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

【讨论】：

这不是同一个包 - 这可以解释你的问题。
谢谢。以与 CRA 相同的方式使用 SVG 的最佳答案。使用样式组件就像魅力一样。