vite-plugin-svgr在Vite+React+TypeScript环境中失效问题求助

开发者阿泽

2026-7-8

解决vite-plugin-svgr无法导出ReactComponent的问题

以下是几个能快速定位并解决问题的方案，按优先级尝试：

1. 修改导入语句的后缀标识

Vite默认会把SVG当作静态资源处理，需要明确告知插件要将其转为React组件。把导入语句改成：

import { ReactComponent as MainTitle } from "../assets/search.svg?svgr";

添加?svgr后缀，强制触发vite-plugin-svgr的转换逻辑。

2. 调整插件配置项

在vite.config.ts中给svgr插件添加更明确的配置，确保它能正确识别并转换你的SVG文件：

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

export default defineConfig({
  plugins: [
    react(),
    svgr({
      include: "**/*.svg", // 匹配所有SVG文件
      svgrOptions: {
        // 可选：添加SVGR的转换配置，比如去掉SVG的width/height属性等
      }
    })
  ]
});

3. 确认TypeScript类型定义正确

如果你的svg.d.ts文件存在，检查内容是否正确，若不存在则新建该文件放在src目录下：

declare module "*.svg" {
  import React from "react";
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

同时确保tsconfig.json的include数组包含这个文件，就像你当前配置的那样。