[英]Correct way of working with SVG in a TypeScript React project with ESlint
In my project I am using such technologies as TypeScript, React and ESlint.在我的项目中,我使用了 TypeScript、React 和 ESlint 等技术。
The problem is that eslint is always rising an error for svg files问题是 eslint 总是对 svg 文件报错
"Unsafe assignment of an any value.(eslint@typescript-eslint/no-unsafe-assignment)". “任何值的不安全分配。(eslint@typescript-eslint/no-unsafe-assignment)”。
In root of my src folder I have custom.d.ts with svg module declared:在我的 src 文件夹的根目录中,我声明了带有 svg 模块的 custom.d.ts:
// 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.尝试了两种声明都评论了一个,一个来自 create-react-app。
The way I am using SVG's in the project:我在项目中使用 SVG 的方式:
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 中的规则,但我认为应该有更好的方法来处理这个问题。
using this declaration removes the eslint error for me:使用此声明为我消除了 eslint 错误:
declare module "*.svg" {
const src: string;
export default src;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.