Question

我正在尝试以角度7内联加载svgs。

到目前为止，我已经尝试过：

import icon = require('./icon.svg');

由于文件加载器而导致icon.svg

import icon = require('raw-loader?!./icon.svg');

得出__webpack_public_path__ + "icon.svg";

与以下相同：

import * as icon3 from 'raw-loader?!./icon.svg';

和

import icon4 from 'raw-loader?!./icon.svg';

将变得不确定。

然而，将icon.svg重命名为icon.foo，然后将图标加载为：

import * as icon from 'raw-loader?!./icon.foo';

和typings.d.ts中的适当类型会导致预期的行为，并且变量图标包含内联的内容。

对我来说，它就像文件加载器的某种方式接缝在原始加载器之前。更改node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js以在规则中加载类似html的svg也可以。但这不是走的路。

有什么想法吗？

Answer 1

由于该规则已经定义，因此必须通过在加载程序的开头放置两个!!来推翻该规则：

import icon = require('!!raw-loader?!./icon.svg');

请参见：https://webpack.js.org/loaders/raw-loader/位于最底部

当心，如果您已经在webpack.config.js中为扩展定义了加载器，则应该使用：

'!!! raw-loader！./ file.css'; //向请求添加!!将禁用配置中指定的所有加载程序

Answer 2

我建议您创建一个.ts文件

my-svg.ts

export const mySVG = `<svg></svg>`;

然后您可以正常导入

import {mySVG} from 'path/to/file/my-svg.ts'

如何按角度内嵌svg？

2 个答案: