How to inline svgs in angular?

Question

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?

Answer 1

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

Answer 2

I would suggest you to create a .ts file

my-svg.ts

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

Then you can import it normally

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