Gelen typescript(*.tsx)dosyalar bu ifadeye svg dosyası alamıyor:

import logo from './logo.svg';

Transpiler diyor ki: [ts] cannot find module './logo.svg'. svg dosyam sadece <svg>...</svg>.

Ancak .jsdosyada, aynı ithalat beyanıyla herhangi bir sorun olmadan onu içe aktarabiliyorum. Sanırım ts transpiler için bir şekilde ayarlanması gereken svg dosyası türüyle ilgisi var.

Bunun nasıl çalıştığını ts dosyalarında paylaşır mısınız?

Web paketi kullanıyorsanız, bunu özel bir tür dosyası oluşturarak yapabilirsiniz.

Aşağıdaki içeriğe sahip custom.d.ts adlı bir dosya oluşturun :

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

Ekle custom.d.tsiçin tsconfig.jsonaşağıda

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

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

Kullanımı işaret ettiğiniz için teşekkürler smarxrequire() . Benim durumumda şöyle olmalı:

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

* .tsx dosyalarında sorunsuz çalışan

custom.d.tsDoğru türde ( RedMatt sayesinde) bir dosya ekleyin (bunu src dizininin kök yolunda oluşturdum ):

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

Svg-react-loader veya başka bir şey yükleyin , ardından:

• Ana svg yükleyici olarak kullanın
• Veya bir kod tabanını taşıyorsanız ve çalışan parçaya (JS) dokunmak istemiyorsanız, içe aktarmada yükleyiciyi belirtin:

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

Sonra bunu bir JSX etiketi olarak kullanın:

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

Bulduğum çözüm: ReactJS projesinde, react-app-env.d.ts dosyasında aşağıdaki gibi yorumdaki alanı kaldırmanız yeterli:

Önce

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

Sonra

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

Sana yardım etmeyi umuyorum

Bir REACT + typcript öğreticisini denerken aynı sorunu yaşadım.
Benim için işe yarayan aşağıdaki ithalat ifadesiydi.

import * as logo from 'logo.svg'

İşte package.json'daki bağımlılıklarım.

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

Umarım birine yardımcı olur.

Bunu yapmanın uyguladığımız alternatif bir yolu var: SVG bileşenlerinizi oluşturun. Bunu yaptım çünkü e-postalarımın requireyanında ortak JS ifadeleri kullandığım için beni rahatsız etti import.

TypeScript ile n kod üzerinde varlık kullanmak için, bu içe aktarmalar için türü ertelememiz gerekir . Bu, projemizde TypeScript için özel tanımları belirten bir custom.d.ts dosyası gerektirir .

.Svg dosyaları için bir bildirim oluşturalım:

custom.d.ts

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

Burada, .svg ile biten herhangi bir içe aktarmayı belirterek ve modül içeriğini herhangi biri olarak tanımlayarak SVG'ler için yeni bir modül bildiriyoruz.

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

puglin slint kullanıyorsanız, bir yorum olduğunu düşünerek devre dışı bırakmış olabilir, ancak svg'yi okumamak için bu tür komut dosyası modülüne ihtiyacınız var, sadece satırı devre dışı bırakın ve mutlu olun

*.svgAşağıdakileri yaparak iş yapabildim :

Yüklemek next-images

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

Güncelleme next.config.js

next.config.jsDosyanız yoksa , kök dizininde bir tane oluşturun. Sonra Ekle:

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

standart içe aktarma şimdi çalışmalı

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