Impossible d'importer les fichiers svg au format dactylographié

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

import logo from './logo.svg';

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

Mais dans le .jsfichier, je suis capable de l'importer sans aucun problème avec exactement la même déclaration d'importation. Je suppose que cela a quelque chose à voir avec le type de fichier svg qui doit être défini d'une manière ou d'une autre pour ts transpiler.

Pourriez-vous s'il vous plaît partager comment faire fonctionner cela dans les fichiers TS?

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

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

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

Ajouter le custom.d.tsà tsconfig.jsoncomme ci-dessous

"include": ["src/components", "src/custom.d.ts"]

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

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

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

qui fonctionne bien dans les fichiers * .tsx

Ajoutez un custom.d.tsfichier (je l'ai créé sur le chemin racine de mon répertoire src) avec le type correct (grâce à RedMatt ):

declare module '*.svg' {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

Installez svg-react-loader ou un autre , puis:

• Utilisez-le comme chargeur svg principal
• Ou si vous migrez une base de code et que vous ne voulez pas toucher la partie de travail (JS), spécifiez le chargeur lors de l'importation:

import MySVG from '-!svg-react-loader!src/assets/images/name.svg'

Ensuite, utilisez-le simplement comme une balise JSX:

function f() { 
  return (<MySVG />); 
}

La solution que j'ai trouvée: dans le projet ReactJS, dans le fichier react-app-env.d.ts, vous supprimez simplement l'espace dans le commentaire tel que:

Avant

// / <reference types="react-scripts" />

Après

/// <reference types="react-scripts" />

J'espère t'aider

J'ai eu le même problème en essayant un tutoriel dactylographié REACT +.
Ce qui a fonctionné pour moi, c'est 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.

Il existe une autre façon de faire cela que nous avons implémentée: créer vos composants SVG. Je l'ai fait parce que cela me dérangeait d'utiliser des requiredéclarations commonJS à côté de mes imports.

    // eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />

si vous utilisez le slint puglin, il se peut qu'il ait désactivé en pensant que c'était un commentaire mais pas pour lire le svg, vous avez besoin de ce type de module de script, désactivez simplement la ligne et soyez heureux

Pour utiliser n actifs sur le code avec TypeScript , nous devons différer le type pour ces importations . Cela nécessite un fichier custom.d.ts qui signifie des définitions personnalisées pour TypeScript dans notre projet.

Configurons une déclaration pour les fichiers .svg:

custom.d.ts

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

Ici, nous déclarons un nouveau module pour les SVG en spécifiant toute importation qui se termine par .svg et en définissant le contenu du module comme any.