如何在Create React App + TypeScript项目中导入SVG到组件？

以下是你可能遗漏的几个关键点：

• 完善SVG的类型声明内容
  你当前的declare module '*.svg';仅声明了模块存在，但未定义导出成员。由于你是通过{ ReactComponent }的方式导入，需要在类型声明里明确导出这个React组件类型：

  declare module '*.svg' {
    import React from 'react';
    export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
    // 若需要同时支持默认导出可添加此行
    // export default ReactComponent;
  }
  

  这样TS就能识别到模块中存在ReactComponent这个导出成员。

• 检查tsconfig.json的compilerOptions配置
  确认未设置typeRoots或types选项限制TS的类型查找范围。比如如果typeRoots仅指定["node_modules/@types"]，你的自定义.d.ts文件会被忽略。建议移除typeRoots配置，或者将类型文件所在目录加入typeRoots数组。

• 确认webpack配置（非CRA项目）
  如果项目不是使用Create React App而是自定义webpack配置，需确保已配置@svgr/webpack将SVG转换为React组件。TS需要知道导入的SVG是React组件模块，而非普通文件资源。示例配置：

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

• 重启TS语言服务
  修改类型声明文件后，编辑器的TypeScript服务可能未自动刷新。在VS Code中可按下Ctrl+Shift+P，选择「TypeScript: Restart TS Server」，再检查错误是否消失。

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