在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文件中分享一下如何做到这一点吗?
当前回答
感谢smarx指出使用require()。所以在我的例子中,它应该是:
const logo = require("./logo.svg") as string;
在*中工作得很好。tsx文件
其他回答
如果你正在使用Create-React-App启动器,请确保react-app-env.d。Ts包含如下行:
/// <reference types="react-scripts" />
如果你使用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文档
在CRA应用程序中导入SVG文件
如果你想在CRA应用(create-react-app)中导入SVG文件,而不做任何配置,你可以使用以下方法之一:
方法1
import { ReactComponent as MyIcon } from "./assets/images/my-icon.svg";
...
<MyIcon />
方法2
import myIconFileName from './assets/images/my-icon.svg';
...
<img src={myIconFileName} />
如果你使用webpack,你可以通过创建一个自定义类型文件来做到这一点。
创建一个名为custom.d.ts的文件,内容如下:
declare module "*.svg" {
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
export default content;
}
将custom.d.ts添加到tsconfig。Json格式如下
"include": ["src/components", "src/custom.d.ts"]
来源:https://webpack.js.org/guides/typescript/ importing-other-assets
对我来说,我必须包含react-app-env.d。tsconfig*.json:
"include": [
"src/Router.tsx", // my main entry point
"src/global.d.ts", // global stuff
"src/react-app-env.d.ts" // react global stuff
]