React项目（Parcel构建）无法导入SVG文件的解决求助

Parcel本身对SVG有良好支持，不需要额外安装大部分插件，下面分两种常用场景给出具体操作，以及解决导入失败问题的排查步骤：

1. 将SVG作为React组件导入（可直接渲染、支持样式定制） #

Parcel 2默认集成了SVGR，直接用以下语法导入即可：

// 导入时重命名组件，避免命名冲突
import { ReactComponent as SvgIcon } from './your-icon.svg';

// 在组件中使用
function App() {
  return (
    <div>
      {/* 可以直接给组件加className、style等属性定制样式 */}
      <SvgIcon className="icon-style" />
    </div>
  );
}

如果是仍在使用Parcel 1的旧项目，需要先安装专用插件：

npm install parcel-plugin-react-svg --save-dev

安装后重启Parcel服务，再用上面的ReactComponent语法导入即可。

2. 将SVG作为静态图片资源导入（当作普通图片使用） #

如果不需要把SVG当作组件，只是作为img标签的源，直接导入路径即可：

import svgImageUrl from './your-image.svg';

function App() {
  return (
    <div>
      <img src={svgImageUrl} alt="描述文本" />
    </div>
  );
}

排查导入失败的常见问题 #

如果按上面的方法还是无法导入，试试以下步骤：

• 检查Parcel版本：运行parcel --version，确保是Parcel 2.x版本，Parcel 1已停止维护，建议升级到最新版：npm install parcel@latest --save-dev
• 清除缓存：删除项目根目录下的.parcel-cache和dist文件夹，然后重新启动Parcel服务，缓存异常是常见的导入失败原因
• 核对导入路径：确认SVG文件的相对路径没有写错，比如是否漏写了文件夹层级、文件名大小写是否匹配（区分大小写的系统如Linux/macOS要注意）
• 检查React依赖：确保项目已正确安装React和ReactDOM：npm install react react-dom

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