How to inline svgs in angular?

Issue

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

Answered By – Eydrian

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.