如何以角度内联svgs？

Question

我正在尝试使用 angular 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导致预期的行为，变量 icon 包含内联内容。

对我来说，它就像文件加载器以某种方式在原始加载器之前。更改node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js为在规则中加载 svgs 之类的 htmls 也有效。但这不是一条路。

有任何想法吗？

Answer 1

因为规则已经定义，所以必须通过!!在加载器的开头放置两个来否决它：

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

请参阅：最底部的https://webpack.js.org/loaders/raw-loader/

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

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