Получение неопределенного при импорте svg как ReactComponent в проект create-реагировать на приложение

Question

Я получаю следующую ошибку при попытке загрузить svg как ReactComponent.

Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов)) но получил: undefined.Вероятно, вы забыли экспортировать компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

Проверьте метод рендеринга Icon.

IЯ использую Create-реакции-приложение с опцией машинописи для создания проекта.Если я правильно понимаю документ, я смогу импортировать svgs как ReactComponent из коробки (начиная с CRA2.0).Но странно, я получаю неопределенное значение для импортированного компонента.

Добавление изображений, шрифтов и файлов · Создание приложения React https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs

В настоящее время используются следующие пакеты.

    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "^3.0.1",
    "@types/node": "^12.0.0",
    "@types/react": "^16.8.17",
    "@types/react-dom": "^16.8.4",
    "@types/react-redux": "^7.0.8",
    "@types/react-router-dom": "^4.3.3",

Мои коды указаны ниже.

Icon.tsx

import * as React from 'react';
import { ReactComponent as IconSvg } from './IconSvg.svg';

const Icon: React.FC<IconProps> = props => {
  console.log(IconSvg); // undefined
  return (<IconSvg />);
};

export default Icon;

custom.d.ts

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
} 

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "baseUrl": "src",
    "rootDir": "src",
    "outDir": "build/dist",
    "target": "es5",
    "jsx": "react",
    "lib": [
      "es6",
      "dom"
    ],
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": false,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src",
    "custom.d.ts"
  ],
  "exclude": [
    "node_modules",
    "node_scripts",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

Любой совет приветствуется.