typescript 无法在打字稿中导入 svg 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44717164/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unable to import svg files in typescript
提问by AngryBoy
In typescript(*.tsx)files I cannot import svg file with this statement:
在typescript(*.tsx)文件中，我无法使用以下语句导入 svg 文件：
import logo from './logo.svg';
Transpiler says:[ts] cannot find module './logo.svg'.My svg file is just <svg>...</svg>.
Transpiler 说：[ts] cannot find module './logo.svg'.我的 svg 文件只是<svg>...</svg>.
But in .jsfile I'm able to import it without any issues with exact the same import statement. I suppose it has something to do with type of svg file which must be set somehow for ts transpiler.
但是在.js文件中，我可以使用完全相同的导入语句导入它而不会出现任何问题。我想它与 svg 文件的类型有关，必须以某种方式为 ts 转译器设置。
Could you please share how to make this work in ts files?
你能分享一下如何在 ts 文件中进行这项工作吗？
回答by Graham
If you use webpack, you can do this by creating a custom types file.
如果您使用 webpack，则可以通过创建自定义类型文件来实现。
Create a file named custom.d.tswith the following content:
创建一个名为custom.d.ts的文件，内容如下：
declare module "*.svg" {
const content: string;
export default content;
}
Source: https://webpack.js.org/guides/typescript/#importing-other-assets
来源：https: //webpack.js.org/guides/typescript/#importing-other-assets
回答by AngryBoy
回答by Allenaz
Add a custom.d.tsfile (I created it on the root path of my src dir) with the correct type (thanks to RedMatt):
添加一个custom.d.ts类型正确的文件（我在我的 src 目录的根路径上创建了它）（感谢RedMatt）：
declare module '*.svg' {
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
export default content;
}
Install svg-react-loaderor some other, then:
安装svg-react-loader或其他一些，然后：
- Use it as the main svg loader
- Or if you're migrating a codebase and don't want to touch the working part (JS) specify the loader on the import:
- 将其用作主要的 svg 加载器
- 或者，如果您正在迁移代码库并且不想接触工作部分 (JS)，请在导入时指定加载器：
import MySVG from '-!svg-react-loader!src/assets/images/name.svg'
Then just use it as a JSX tag:
然后将其用作 JSX 标签：
function f() {
return (<MySVG />);
}
回答by Kiran Mohan
I had the same issue while trying out a REACT + typescript tutorial.
What worked for me was the following import statement.
我在尝试 REACT + 打字稿教程时遇到了同样的问题。
对我有用的是以下导入语句。
import * as logo from 'logo.svg'
Here are my dependencies in package.json.
这是我在 package.json 中的依赖项。
"dependencies": {
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-scripts-ts": "3.1.0"
},
Hope it helps someone.
希望它可以帮助某人。
回答by jilvanx
The solution that I found: In ReactJS project, in file react-app-env.d.ts you just remove the space in the comment such as:
我找到的解决方案：在 ReactJS 项目中，在文件 react-app-env.d.ts 中，您只需删除注释中的空格，例如：
Before
前
// / <reference types="react-scripts" />
After
后
/// <reference types="react-scripts" />
I hope to help you
我希望能帮助你
回答by Breno Melo
// eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />
if you are using the puglin slint it may be that he has disabled thinking it was a comment but not to read the svg you need this type script module just disable the line and be happy
如果您正在使用 puglin slint，则可能是因为他认为这是一条评论而被禁用，而不是阅读 svg，您需要此类型脚本模块，只需禁用该行即可
回答by endymion1818
There's an alternative way of doing this which we've implemented: make your SVGs components. I did this because it bugged me that I was using commonJS requirestatements alongside my imports.
我们已经实现了一种替代方法：制作您的 SVG 组件。我这样做是因为它让我觉得我在srequire旁边使用了 commonJS语句import。
