React.js中无法加载Storyset下载的SVG文件的问题咨询

Storyset下载的SVG本地浏览器能正常打开，但在React里用img标签加载出错，通常是因为这类SVG包含浏览器能兼容但React/webpack解析时会报错的内容，下面是几种可行的解决方法：

方法一：将SVG作为React组件导入（推荐） #

Create React App（以及多数现代React项目）支持直接把SVG当作React组件导入，这种方式兼容性最好，还能直接通过props控制宽高、颜色等属性：

1. 把下载的SVG文件放到项目的src/assets（或其他自定义资源目录）中
2. 在组件中导入并使用：

import DesktopIllustration from './assets/desktop-computer.svg';

function YourComponent() {
  return (
    <div>
      {/* 直接作为组件渲染，可通过props设置属性 */}
      <DesktopIllustration width="400" height="400" />
    </div>
  );
}

export default YourComponent;

方法二：修改SVG文件后用img标签加载 #

如果一定要用img标签，需要先调整SVG的内容，去除可能导致解析失败的部分：

1. 用文本编辑器打开下载的SVG文件
2. 删除开头的<?xml version="1.0" encoding="UTF-8"?>声明
3. 检查SVG内部是否有外部样式引用（比如link标签或外部style文件的引用），将这些样式改为内联样式
4. 修改后的SVG文件放到项目的public目录下
5. 在组件中用绝对路径引用：

function YourComponent() {
  return (
    <div>
      <img 
        src="/desktop-computer.svg" 
        alt="桌面电脑插画" 
        width="400" 
        height="400" 
      />
    </div>
  );
}

export default YourComponent;

方法三：自定义Webpack配置处理SVG（适合非Create React App项目） #

如果你的项目是自定义Webpack配置，可以添加@svgr/webpack来处理SVG文件：

1. 安装依赖：

npm install @svgr/webpack --save-dev

2. 在Webpack配置文件中添加规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
};

之后就可以像方法一那样直接导入SVG作为组件使用。

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