title: Getting undefined when importing svg as ReactComponent in create-react-app project
body: <p>I'm getting following error when trying to load svg as ReactComponent.</p>
  
  <blockquote>
    <p>Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.</p>
    
    <p>Check the render method of <code>Icon</code>.</p>
  </blockquote>
  
  <p>I'm using create-react-app with typescript option to create project.
  If I'm understanding the document correctly, I should be able to import svgs as ReactComponent out of the box(since CRA2.0).
  But weirdly, I'm getting undefined for the imported component.</p>
  
  <blockquote>
    <p>Adding Images, Fonts, and Files · Create React App
    <a href="https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs" rel="noreferrer">https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs</a></p>
  </blockquote>
  
  <p>Currently using following packages.</p>
  
  <pre><code>    "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",
  </code></pre>
  
  <p>My code is below.</p>
  
  <p>Icon.tsx</p>
  
  <pre class="lang-js prettyprint-override"><code>import * as React from 'react';
  import { ReactComponent as IconSvg } from './IconSvg.svg';
  
  const Icon: React.FC&lt;IconProps&gt; = props =&gt; {
    console.log(IconSvg); // undefined
    return (&lt;IconSvg /&gt;);
  };
  
  export default Icon;
  </code></pre>
  
  <p>custom.d.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>declare module '*.svg' {
    import React = require('react');
    export const ReactComponent: React.FunctionComponent&lt;React.SVGProps&lt;SVGSVGElement&gt;&gt;;
    const src: string;
    export default src;
  } 
  </code></pre>
  
  <p>tsconfig.json</p>
  
  <pre class="lang-js prettyprint-override"><code>{
    "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"
    ]
  }
  </code></pre>
  
  <p>Any advice is appreciated.</p>