在typescript(*.tsx)文件中,我不能用下面的语句导入svg文件:
import logo from './logo.svg';
Transpiler说:[ts]找不到模块'./logo.svg'。 我的svg文件就是<svg>…</svg>。
但在.js文件中,我能够导入它没有任何问题,完全相同的导入语句。我想这与svg文件的类型有关,它必须以某种方式为ts transpiler设置。
你能在ts文件中分享一下如何做到这一点吗?
在typescript(*.tsx)文件中,我不能用下面的语句导入svg文件:
import logo from './logo.svg';
Transpiler说:[ts]找不到模块'./logo.svg'。 我的svg文件就是<svg>…</svg>。
但在.js文件中,我能够导入它没有任何问题,完全相同的导入语句。我想这与svg文件的类型有关,它必须以某种方式为ts transpiler设置。
你能在ts文件中分享一下如何做到这一点吗?
当前回答
你可以像create-react-app一样为svgs声明module:
react-app.d.ts
declare module '*.svg' {
import * as React from 'react';
export const ReactComponent: React.FunctionComponent<React.SVGProps<
SVGSVGElement
> & { title?: string }>;
const src: string;
export default src;
}
看到源
其他回答
对我来说,当我在src/types/images.d.ts中放入以下一行时,它就工作了
声明模块'*.svg';
我用下面的方法导入图像
import {ReactComponent as WifiIcon} from '../../ assets/images/Wifi.svg';
在tsconfig.json
我有以下complierOptions
"compilerOptions": {
"typeRoots": ["node_modules/@types", "src/types"]
}
希望它能帮助到别人。我使用的是最新版本的CRA。
// eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />
如果你正在使用puglin slint,可能是他已经禁用了,认为这是一个评论,但不是为了阅读SVG,你需要这个类型脚本模块,只是禁用行和高兴
如果你使用webpack,安装svg-inline-loader,在webpack.config.js中添加该模块:
{
test: /\.svg$/,
loader: 'svg-inline-loader',
}
它在建造后工作良好。
如果你的IDE报告一个交互错误,它可以通过添加//@ts-ignore来解决:
//@ts-ignore
import logo from './logo.svg';
Svg-inline-loader webpack文档
我们已经实现了另一种方法:制作svg组件。我这样做是因为它困扰我,我使用commonJS的要求语句与我的导入。
如果你正在使用Create-React-App启动器,请确保react-app-env.d。Ts包含如下行:
/// <reference types="react-scripts" />