React如何支持SVG文件导入？其底层实现逻辑是什么？

先回顾用法 #

• 导入SVG为React组件：

import { ReactComponent as Foo } from "./foo.svg";

• 在组件中使用：

<Foo fill="orange"/>

关于你看到的TypeScript模块声明 #

你找到的*.svg模块声明只是TypeScript类型定义文件，它的作用仅在于：

• 告诉TS编译器，导入.svg文件时可以解构出ReactComponent这个符合React.FunctionComponent<SVGProps<SVGSVGElement>>类型的函数组件
• 同时默认导出的是SVG资源的路径字符串
  它本身不负责任何实际的SVG转组件逻辑，只是做类型校验和开发时的代码提示。

实际的SVG转React组件逻辑在哪里？ #

真正把SVG文件内容转换成React组件的工作，是由项目的构建工具完成的，具体依赖对应的插件/loader：

• Webpack生态：依赖@svgr/webpack插件。它会在打包过程中解析SVG文件，将SVG标签转换成React JSX元素，生成一个包含ReactComponent的导出模块，同时默认导出SVG的资源URL。
  举个转换后的代码示例：

  import * as React from 'react';
  
  const ReactComponent = (props) => {
    return <svg viewBox="0 0 24 24" {...props}><path d="M12 2..."/></svg>;
  };
  
  export default '/static/media/foo.abc123.svg';
  export { ReactComponent };
  

• Vite生态：Vite内置了SVG处理能力，当使用import { ReactComponent } from '*.svg'时，会自动调用@svgr/core（SVGR核心库）完成转换，原理和Webpack插件一致。
• Create React App：内部已集成@svgr/webpack，无需额外配置即可直接使用该导入方式。

简单总结：TypeScript声明是给编译器看的「类型约定」，而实际的SVG转React组件的编译工作，是由构建工具中的SVGR相关工具在打包阶段完成的。

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