How to inline svgs in angular?

I'm trying to load svgs inline with angular 7.

So far I tried:

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


results in icon.svg due to file-loader

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


results in __webpack_public_path__ + "icon.svg";

which is the same as:

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


and

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


will become undefined.

However renaming the icon.svg in something like icon.foo and then loading the icon with:

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


and the appropriate type in typings.d.ts results in the anticipated behavior and the variable icon holds the inlined content.

For me it seams like the file-loader somehow precedes the raw loader. Changing node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js to load svgs like htmls in the rules works as well. But this is not a way to go.

Any ideas?

Continue reading...