无法使用 Vite 作为 ReactComponent 导入 SVG

Question

尝试使用这个库：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'

Answer 1

2023 年 10 月更新 -vite-plugin-svgr版本 ^4.0.0

使用（见下文）导入 SVG 文件时vite-plugin-svgr，请确保在导入的文件上使用新添加的?react查询后缀，这允许您使用默认导出并跳过别名ReactComponent：

import ReactLogo from './assets/react.svg?react'

<ReactLogo />

如果您使用 TypeScript，您还需要在文件的最顶部import（语句之前）添加以下内容：

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

2023 年更新

使用vite-plugin-svgr

1. 添加SVGR到项目中

yarn add vite-plugin-svgr

2. 注册插件SVGR即可参与投票vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(), 
    svgr({ 
      svgrOptions: {
        // svgr options
      },
    }),
  ], 
})

3. 在App.tsx将 SVG 导入为 React Component 中：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(), 
    svgr({ 
      svgrOptions: {
        // svgr options
      },
    }),
  ], 
})

堆栈闪电战示例：

• 标准项目
• 使用动态 SVG 项目

参考：

• 了解有关SVGR 的更多信息，请访问https://react-svgr.com/docs/ecosystem/#articles
• 插件选项
• 可以添加到的SVGR 选项列表svgrOptions:{}：

奖金：

• Amit Mondal的动态 SVG 组件

注意： 以前的插件 @honkhonk/vite-plugin-svgr 已弃用（感谢 Richard Fernandez 指出）

Answer 2

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

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

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

Answer 3

您应该使用@svgr/rollup而不是vite-plugin-svgr. vite-plugin-svgr不是一个好的选择，因为它不支持svgo，并且它用于esbuild转换一些 svg 代码，在 es5 环境中可能会出现一些问题。

最糟糕的是vite-plugin-svgr无法添加svgo插件，请参阅此问题： https: //github.com/pd4d10/vite-plugin-svgr/issues/49。

npm install @svgr/rollup -D

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

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

Answer 4

yarn add -D vite-plugin-svgr将是最好的选择，因为它不断得到维护。

// vite.config.js
import svgr from 'vite-plugin-svgr'

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

// vite.config.js
import svgr from 'vite-plugin-svgr'

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

您也可以通过在 中设置此配置选项来默认导入vite.config.js。

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

svgr({
  exportAsDefault: true
})

但请注意，它会覆盖 Vite 的默认行为，将 URL 导出为默认值。

如果您有任何打字稿问题，还有一个声明助手可以更好地进行类型推断

// now you can import as default
import Logo from './logo.svg'