reactjs - TypeScript React projesinde ESlint ile SVG ile çalışmanın doğru yolu

Projemde TypeScript, React ve ESlint gibi teknolojileri kullanıyorum.
Sorun, eslint'in svg dosyaları için sürekli olarak bir hata vermesi:
"Herhangi bir değerin güvensiz atanması.(eslint@typescript-eslint/no-unsafe-assignment)".

src klasörümün kökünde svg modülü tanımlı custom.d.ts dosyam var:

// declare module "*.svg";

declare module "*.svg" {
  import * as React from "react";

  export const ReactComponent: React.FunctionComponent<
    React.SVGProps<SVGSVGElement> & { title?: string }
  >;

  const src: string;
  export default src;
}

her iki bildirimi de denedim, biri yorum satırı yapılmış olan ve create-react-app'ten alınan.
Projede SVG'leri kullandığım yol:

import Logo from "images/logo.svg";

<Link to={PATH.ROOT} className={styles.logo}>
    <img src={Logo} alt="Logo" className={styles.icon} />
     <span className={styles.title}>Ascension Wiki</span>
</Link>

Hatanın üstesinden gelmek için şu şekilde tip dönüşümü kullanabilirim:

<img src={Logo as string} alt="Logo" className={styles.icon} />

Veya ESLint'te kuralı kapatabilirsiniz, ama bence bu sorunla başa çıkmanın daha iyi bir yolu olmalı.

Cevap #1

bu beyanı kullanmak benim için eslint hatasını kaldırıyor:

declare module "*.svg" {
  const src: string;
  export default src;
}

Cevap #2

Yukarıdaki çözüm benim için işe yaradı, belki bir şeyleri yanlış yaptım, ama ben sadece as string ekledim, örneğin <Image src={RightArrow as string} /> ve bu işe yaradı.

İlgili makaleler