Correct way of working with SVG in a TypeScript React project with ESlint

user_7087084 0
Viewed 2299

In my project I am using such technologies as TypeScript, React and ESlint.
The problem is that eslint is always rising an error for svg files
"Unsafe assignment of an any value.(eslint@typescript-eslint/no-unsafe-assignment)".
enter image description here

In root of my src folder I have custom.d.ts with svg module declared:

// 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;
}

tried both declarations commented one and the one taken from create-react-app.
The way I am using SVG's in the project:

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>

To get rid of the error I can use type casting like:

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

Or turn off the rule in ESlint, but I think there should be a better way of dealing with this issue.

eslint webpack typescript reactjs svg
1 Answers

using this declaration removes the eslint error for me:

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