SVG-Dateien können nicht in Typoskript importiert werden

In typescript(*.tsx)Dateien kann ich keine SVG-Datei mit dieser Anweisung importieren:

import logo from './logo.svg';

Transpiler sagt: [ts] cannot find module './logo.svg'. Meine SVG-Datei ist nur <svg>...</svg>.

Aber in .js Datei kann ich es ohne Probleme mit genau der gleichen Importanweisung importieren. Ich nehme an, es hat etwas mit dem Typ der SVG-Datei zu tun, die irgendwie für den Transpiler eingestellt werden muss.

Könnten Sie bitte mitteilen, wie dies in ts-Dateien funktioniert?

Wenn Sie Webpack verwenden, können Sie dies tun, indem Sie eine benutzerdefinierte Typdatei erstellen.

Erstellen Sie eine Datei mit dem Namen custom.d.ts mit folgendem Inhalt:

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

Fügen Sie die custom.d.tszu tsconfig.jsonwie unten

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

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

Vielen Dank an smarx für den Hinweis auf die Verwendung require(). In meinem Fall sollte es also sein:

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

Das funktioniert gut in * .tsx-Dateien

Fügen Sie eine custom.d.tsDatei (ich habe sie im Stammpfad meines src-Verzeichnisses erstellt) mit dem richtigen Typ hinzu (dank RedMatt ):

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

Installieren Sie svg-react-loader oder einen anderen , dann:

• Verwenden Sie es als Haupt-SVG-Loader
• Oder wenn Sie eine Codebasis migrieren und den Arbeitsteil (JS) nicht berühren möchten, geben Sie den Loader beim Import an:

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

Verwenden Sie es dann einfach als JSX-Tag:

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

Die Lösung, die ich gefunden habe: Im ReactJS-Projekt entfernen Sie in der Datei react-app-env.d.ts einfach das Leerzeichen im Kommentar, z.

Vor

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

Nach dem

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

ich hoffe Dir zu helfen

Ich hatte das gleiche Problem beim Ausprobieren eines REACT + Typoskript-Tutorials.
Was für mich funktioniert hat, war die folgende Importanweisung.

import * as logo from 'logo.svg'

Hier sind meine Abhängigkeiten in package.json.

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

Hoffe es hilft jemandem.

Um n On-Code-Assets mit TypeScript zu verwenden , müssen Sie den Typ für diese Importe verschieben . Dies erfordert eine Datei custom.d.ts , die benutzerdefinierte Definitionen für TypeScript in unserem Projekt angibt .

Lassen Sie uns eine Deklaration für .svg-Dateien einrichten:

custom.d.ts

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

Hier deklarieren wir ein neues Modul für SVGs, indem wir einen Import angeben, der mit .svg endet, und den Inhalt des Moduls als einen beliebigen definieren.

Es gibt eine alternative Möglichkeit, die wir implementiert haben: Erstellen Sie Ihre SVG-Komponenten. Ich habe dies getan, weil es mich nervte, dass ich requireneben meinen imports commonJS- Anweisungen verwendete .

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

Wenn Sie den Puglin Slint verwenden, kann es sein, dass er deaktiviert hat, weil er dachte, es sei ein Kommentar, aber um das SVG nicht zu lesen, benötigen Sie dieses Skriptmodul. Deaktivieren Sie einfach die Zeile und seien Sie glücklich