angular - 如何在 Angular 中内联 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中的适当类型结果是预期的行为，并且变量图标包含内联内容。

对我来说，它看起来像是文件加载器在某种程度上先于原始加载器。改变node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js在规则中加载 svgs 像 html 一样有效。但这不是一条路。

有什么想法吗？

Answer 1

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

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

2021 年新增

它应该可以在不需要的情况下工作...不要忘记typings.d.ts

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

参见:https://webpack.js.org/loaders/raw-loader/在最底部

Beware, if you already define loader(s) for extension(s) in webpack.config.js you should use:

'!!raw-loader!./file.css'; // Adding !! to a request will disable all loaders specified in the configuration