web-dev-qa-db-fra.com

Impossible d'importer des fichiers svg en texte dactylographié

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 simplement <svg>...</svg>.

Mais dans le fichier .js, je suis en mesure de 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 pour que cela fonctionne dans les fichiers ts?

typescriptsvg
34
AngryBoy

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

56
Graham

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

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

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

18
AngryBoy

J'ai eu le même problème en essayant un didacticiel de réaction + TypeScript.
Ce qui a fonctionné pour moi a été 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.

1
Kiran Mohan

Nous avons implémenté une autre façon de procéder: créer vos composants SVG. Je l’ai fait parce qu’il m’avait mal pensé que j’utilisais les instructions commonJS require aux côtés de mes imports.

0
endymion1818