Vite+React项目构建后SVG资源缺失问题求助

我用Vite+React搭建项目，通过@svgr/rollup插件把SVG当作React组件使用。执行build命令后，src/assets里的PNG图片能正常出现在dist/assets目录，但SVG文件不见了。想部署到Vercel这类平台，不知道问题出在哪。

文件夹结构 #

|-- index.html
|-- ... 其他配置文件
|-- package.json
|-- vite.config.ts
|-- tsconfig.json
|-- src
|   |-- App.tsx
|   |-- ...
|   |-- vite-env.d.ts
|   |-- assets
|       |-- avatar-1.png
|       |-- avatar-2.png
|       |-- avatar-3.png
|       |-- ... .png
|       |-- Social-X.svg
|       |-- ... .svg
|       |-- Social-Pin.svg

vite.config.ts配置 #

import path from "path";

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

export default defineConfig({
  plugins: [
    react(),
    svgr({
      exportType: "named",
      ref: true,
      svgo: false,
      dimensions: false,
      typescript: true,
    }),
    
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

SVG引入方式 #

import { ReactComponent as ArrowRight } from "@/assets/arrow-right.svg"

问题原因 #

当你通过@svgr/rollup把SVG作为React组件引入时，插件会直接将SVG代码编译成React组件的JS逻辑，嵌入到打包后的JS文件中，不会把SVG文件作为静态资源复制到dist/assets。而PNG这类图片是作为静态资源被复制到输出目录，代码中只引用其路径，所以两者处理逻辑完全不同。

解决办法 #

1. 区分SVG的两种使用场景

修改vite.config.ts，通过include/exclude规则指定哪些SVG作为组件编译，哪些作为静态资源复制：

svgr({
  exportType: "named",
  ref: true,
  svgo: false,
  dimensions: false,
  typescript: true,
  // 仅处理带-component后缀的SVG为组件，其余作为静态资源
  include: "**/*-component.svg",
}),

2. 同时支持组件和静态资源引入

如果需要对同一个SVG同时使用两种方式，引入时添加?url后缀获取静态资源路径：

// 作为静态资源引入，获取文件路径（会被复制到dist/assets）
import arrowRightUrl from "@/assets/arrow-right.svg?url";
// 作为React组件引入（编译到JS中）
import { ReactComponent as ArrowRight } from "@/assets/arrow-right.svg";

3. 检查未被引用的SVG

如果某个SVG没有在代码中被任何方式引入，Vite的tree-shaking会忽略它，不会复制到输出目录。确保所有需要的SVG都有对应的引入语句。

内容的提问来源于stack exchange，提问作者Basem A. Sleem