TypeScript - в модуле «* .svg» нет экспортируемого члена «ReactComponent»

Question

Я пытаюсь импортировать файл .svg в качестве компонента React с TypeScript.

Согласно документам React, это делается так:

import { ReactComponent as Icon } from './Icon.svg';

Следуя документации по TypeScript, я добавил это:

// custom.ts.d

declare module '*.svg' {
    const content: any;
    export default content;
}

и

// tsconfig.json

{
    ...
    "files": [
        "custom.d.ts"
    ]
}

SVG рендеринг. Но я получаю ошибку TypeScript:

[ts] Module '"*.svg"' has no exported member 'ReactComponent'. [2305]

Вот мой полный tsconfig файл, если это поможет:

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "jsx": "react",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "baseUrl": ".",
    "plugins": [
      {
        "name": "typescript-styled-plugin"
      }
    ],
    "typeRoots": ["./node_modules/@types"],
    "lib": ["dom", "es2015", "es2017"]
  },
  "exclude": ["node_modules", "dist"],
  "files": [
    "custom.d.ts"
  ]
}

Спасибо!

Answer 1

Ссылка для запроса на извлечение

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

Только потому, что это было полезно для меня и несколько связано. Если вы получаете сообщение об ошибке с Jest, проверьте это

Answer 2

2019 В дополнение к ответу @ basarat: React.SFC не рекомендуется использовать React.FunctionComponent, например:

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

Answer 3

У вас есть export default content; Но вы делаете с именем импорт (не импорт по умолчанию).

Fix

Изменить объявление для экспорта импортируемого имени:

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

Дополнительный

Не рекомендуется использовать files в tsconfig.json. Вместо этого просто используйте include