W typescript(*.tsx)plikach nie mogę zaimportować pliku SVG z tym oświadczeniem:

import logo from './logo.svg';

Transpiler mówi: [ts] cannot find module './logo.svg'. Mój plik SVG jest po prostu <svg>...</svg>.

Ale w .jspliku mogę go zaimportować bez żadnych problemów z dokładnie tą samą instrukcją importu. Przypuszczam, że ma to coś wspólnego z typem pliku svg, który musi być jakoś ustawiony dla transpilera ts.

Czy mógłbyś podzielić się, jak to działa w plikach ts?

Jeśli używasz pakietu webpack, możesz to zrobić, tworząc plik typów niestandardowych.

Utwórz plik o nazwie custom.d.ts z następującą zawartością:

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

Dodaj custom.d.tsdo tsconfig.jsonjak poniżej

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

Źródło: https://webpack.js.org/guides/typescript/#importing-other-assets

Dzięki smarx za wskazanie użycia require(). Więc w moim przypadku powinno to być:

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

który działa dobrze w plikach * .tsx

Dodaj custom.d.tsplik (utworzyłem go na ścieżce głównej mojego katalogu src) z odpowiednim typem (dzięki RedMatt ):

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

Zainstaluj svg-react-loader lub inny , a następnie:

• Użyj go jako głównego programu ładującego svg
• Lub, jeśli migrujesz bazę kodu i nie chcesz dotykać części roboczej (JS), określ moduł ładujący podczas importu:

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

Następnie użyj go jako tagu JSX:

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

Rozwiązanie, które znalazłem: W projekcie ReactJS w pliku React-app-env.d.ts po prostu usuwasz spację w komentarzu np .:

Przed

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

Po

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

Mam nadzieję, że ci pomogę

Miałem ten sam problem podczas wypróbowywania samouczka na maszynie REACT +.
U mnie zadziałało następujące oświadczenie dotyczące importu.

import * as logo from 'logo.svg'

Oto moje zależności w package.json.

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

Mam nadzieję, że to komuś pomoże.

Wdrożyliśmy alternatywny sposób: utwórz komponenty SVG. Zrobiłem to, ponieważ denerwowało mnie, że używam zwykłych requireinstrukcji JS obok moich import.

Aby użyć n zasobów w kodzie z TypeScript , musimy odroczyć typ tych importów . Wymaga to pliku custom.d.ts , który oznacza niestandardowe definicje dla języka TypeScript w naszym projekcie.

Ustawmy deklarację dla plików .svg:

custom.d.ts

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

Tutaj deklarujemy nowy moduł dla plików SVG, określając dowolny import, który kończy się na .svg i definiując zawartość modułu jako dowolną.

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

jeśli używasz puglin slint może być tak, że wyłączył myślenie, że to komentarz, ale nie chcesz czytać svg, potrzebujesz tego modułu skryptu typu po prostu wyłącz linię i bądź szczęśliwy

Udało mi się to zrobić *.svg, wykonując następujące czynności:

zainstalować next-images

cd /to/ur/root
npm install --save next-images

aktualizacja next.config.js

Jeśli nie masz next.config.jspliku, utwórz go w katalogu głównym. Następnie dodaj:

const withImages = require('next-images')
module.exports = withImages()

standardowy import powinien teraz działać

import icon from './icons/thaticon.svg';