如何在Visual Studio Code中将SVG文件添加到React项目？

一、Create React App 项目（官方常用脚手架） #

SVG 文件处理 #

• 当作普通图片使用：把SVG放到src/assets这类自定义资源目录，组件内导入后用img标签引用

import HomeIcon from './assets/home-icon.svg';

function Home() {
  return <img src={HomeIcon} alt="首页图标" />;
}

• 当作React组件使用（支持修改颜色、尺寸等属性）：Create React App默认集成@svgr/webpack，直接按组件方式导入即可

import { ReactComponent as HomeIcon } from './assets/home-icon.svg';

function Home() {
  return <HomeIcon style={{ color: '#2196F3', width: '24px' }} />;
}

MP3 文件处理 #

• 导入后作为音频源：将MP3放到src/assets，导入后给audio标签使用

import BgMusic from './assets/bg-music.mp3';

function Player() {
  return <audio src={BgMusic} loop controls />;
}

• 也可将文件放入项目根目录的public文件夹，直接用绝对路径引用（无需导入）：

<img src="/icons/home-icon.svg" alt="首页图标" />
<audio src="/audio/bg-music.mp3" loop controls />

二、Vite 项目（轻量流行脚手架） #

SVG 文件处理 #

• 普通图片模式：直接导入文件路径

import iconUrl from './assets/home-icon.svg';

function Home() {
  return <img src={iconUrl} alt="首页图标" />;
}

• 组件模式（可修改属性）：先安装插件npm install @vitejs/plugin-react-svg --save-dev，再在vite.config.js中配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import reactSvg from '@vitejs/plugin-react-svg';

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

之后即可将SVG作为组件导入：

import HomeIcon from './assets/home-icon.svg?component';

function Home() {
  return <HomeIcon fill="#2196F3" width="24" />;
}

MP3 文件处理 #

• 直接导入使用：

import audioUrl from './assets/bg-music.mp3';

function Player() {
  return <audio src={audioUrl} loop controls />;
}

• 放入public目录时，直接用绝对路径访问即可，逻辑和Create React App一致。

三、常见问题排查 #

• 核对文件路径：避免写错相对路径，比如../代表上一级目录，./代表当前目录，路径错误会导致文件无法识别
• 检查.gitignore：确认没有把资源目录（如src/assets）加入忽略列表
• 重启开发服务器：添加新文件或修改配置后，重启dev server，很多问题是缓存导致的
• 验证文件完整性：用浏览器直接打开下载的SVG/MP3，确认文件未损坏、格式有效

内容的提问来源于stack exchange，提问作者TheHollyRoller