是否在Angular CLI项目中导入SVG文件？

Question

它在Stackblitz中可以正常工作 。

import circle from './circle.svg';

但是当我在这样的Angular CLI项目中尝试完全相同的导入时：

import logo from './logo.svg';

VSCode显示错误：

Cannot find module './logo.svg'.ts(2307)

并且Angular显示错误：

    ERROR in src/app/app.component.ts(5,18): error TS2307: Cannot find module './logo.svg'.

有什么想法吗？

Answer 1

对我有用的是

const logo = require('./logo.svg') as string;

如果不起作用，请尝试：

const circle = require('!!raw-loader?!../assets/logo.svg') as string;

它将禁用默认文件加载器并返回文件内容。

您也可以在运行时导入文件：

  constructor(http: HttpClient) {
    http.get('/assets/logo.svg', {responseType: 'text'})
      .subscribe(svg => console.log(svg));
  }

或将其用作图像源：

<img src="logo.svg" />

请注意，您的SVG格式无效，因此无法立即使用。 我必须将version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">到<svg>标签使其显示：

<svg viewBox="0 0 104 104" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  ...
</svg>