Impossible d'importer des fichiers svg en texte dactylographié

Question

Dans les fichiers typescript(*.tsx) , je ne peux pas importer de fichier svg avec cette instruction:

 import logo from './logo.svg';
 

Transpiler dit: [ts] cannot find module './logo.svg'. Mon fichier svg est juste <svg>...</svg> .

Mais dans les fichiers .js , je peux l’importer sans aucun problème avec exactement la même instruction d’importation. Je suppose que cela a quelque chose à voir avec le type de fichier svg qui doit être défini de façon ou d'autre pour ts transpiler.

Pourriez-vous s'il vous plaît partager comment faire ce travail dans les fichiers ts?

Answer 1

Si vous utilisez webpack, vous pouvez le faire en créant un fichier de types personnalisé.

Créez un fichier nommé custom.d.ts avec le contenu suivant:

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

Source: https://webpack.js.org/guides/typescript/#importing-other-assets

Answer 2

Merci smarx pour nous avoir signalé l’utilisation require() . Donc dans mon cas, cela devrait être:

 const logo = require("./logo.svg") as string;
 

qui fonctionne très bien dans les fichiers * .tsx

Answer 3

J'ai eu le même problème en essayant un tutoriel de réaction + dactylographie.
Ce qui a fonctionné pour moi était la déclaration d'importation suivante.

 import * as logo from 'logo.svg'
 

Voici mes dépendances dans package.json.

   "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts-ts": "3.1.0"
  },
 

J'espère que ça aide quelqu'un.

Answer 4

Nous avons implémenté une autre manière de procéder: créer vos composants SVG. Je l’ai fait parce que j’utilisais les déclarations communes require jS avec mes import s.