My Webpack Encore loads only file name, not file contents?

Question

I have something like this in JS file:

const icon = require('path-to.svg').default;
div.innerHTML = icon;

When I build my assets using default Webpack 5.6.0 with rule test: /\.(svg)$/, loader: 'raw-loader' the result is awesome:

<div><svg>...</svg></div>

But when I use Symfony Webpack Encore (latest) with (and without too) rule, the result is:

<div>path-to.svg</div>

Only file name! Not file contents!

Why? How can I get the same result with Webpack Encore as with normal Webpack?

Answer 1

Just add raw-loader by yarn\npm and prepend it to required path:

const icon = require('!raw-loader!path-to.svg').default;