angularangular-cli

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?

Solution

  • Because the rule is already defined, it has to be overruled by putting two !! at the beginning of the loader:

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

    ADDITION 2021

    it should work without require ... do not forget the typings.d.ts

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

    See: https://webpack.js.org/loaders/raw-loader/ at the very bottom

    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