如何在角度上内联svgs？

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更改为加载规则中的htmls之类的svg也是有效的。但这不是一条路。

有什么想法吗？

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/

请注意，如果您已经在webpack.config.js中为扩展定义了加载程序，则应该使用： ‘！！raw-加载程序！./file.css’；//向请求添加!!将禁用配置中指定的所有加载程序

Answer 2

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

my-svg.ts

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

然后您就可以正常导入它了。

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