使用<ReactSVG>组件时渲染空div的问题排查与解决

问题原因与解决办法 #

问题根源 #

1. 相对路径解析失效：React项目打包时会重新处理静态资源路径，你写的../../../assets/icons/${name}.svg这种相对路径，在构建后可能无法正确指向SVG文件，导致ReactSVG加载不到资源。
2. 静态资源未被打包工具处理：如果SVG文件没有被webpack等打包工具正确识别和导入，ReactSVG无法读取到资源，最终渲染空div。

针对现有代码的修复 #

方法1：使用PUBLIC_URL（适用于create-react-app）

将assets/icons目录移动到项目根目录的public文件夹下，然后修改Icon组件：

import { ReactSVG } from "react-svg";

const Icon = ({ className, name }) => {
  return <ReactSVG src={`${process.env.PUBLIC_URL}/assets/icons/${name}.svg`} className={className} />;
};

export default Icon;

process.env.PUBLIC_URL会指向create-react-app项目的public目录，确保路径在构建后依然有效。

方法2：动态导入SVG文件

修改Icon组件，通过require动态导入SVG，让打包工具正确处理资源路径：

import { ReactSVG } from "react-svg";

const Icon = ({ className, name }) => {
  // 动态导入SVG文件，require会返回资源的正确路径
  const svgSrc = require(`../../../assets/icons/${name}.svg`).default;
  return <ReactSVG src={svgSrc} className={className} />;
};

export default Icon;

替代实现方案 #

方案1：直接导入SVG为React组件（推荐） #

这是React生态中最常用的图标实现方式，无需第三方库，更可靠：

1. 先创建一个图标映射文件（比如iconsMap.js）：

import HomeIcon from '../../../assets/icons/home.svg';
import UserIcon from '../../../assets/icons/user.svg';
import SettingsIcon from '../../../assets/icons/settings.svg';

export const iconsMap = {
  home: HomeIcon,
  user: UserIcon,
  settings: SettingsIcon
};

2. 修改Icon组件：

import { iconsMap } from './iconsMap';

const Icon = ({ className, name }) => {
  const SvgComponent = iconsMap[name];
  if (!SvgComponent) return null; // 处理不存在的图标
  return <SvgComponent className={className} />;
};

export default Icon;

这种方式下，SVG会被编译为React组件，支持直接通过className修改样式，打包时也会被正确处理。

方案2：使用SVG Sprite（适合大量图标场景） #

将所有SVG合并为一个Sprite文件，通过<use>标签引用，减少HTTP请求：

1. 使用svg-sprite-loader等工具配置webpack，自动生成SVG Sprite。
2. 在项目入口文件（比如index.js）引入所有SVG图标：

import '../../../assets/icons/home.svg';
import '../../../assets/icons/user.svg';
import '../../../assets/icons/settings.svg';

3. 实现Icon组件：

const Icon = ({ className, name }) => {
  return (
    <svg className={className} aria-hidden="true">
      <use href={`#${name}`} />
    </svg>
  );
};

export default Icon;

注意：需要确保每个SVG文件的id属性和你传入的name一致，或者通过loader配置自动设置id。

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