No loader is configured for ".svg" (esbuild)

[noguespi]

Command

build

Description

Please add the ability to import .svg in .ts with esbuild.

Example of use case:

import icons from "../assets/icons/icons.svg";

export class IconModule {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIconSetLiteral(sanitizer.bypassSecurityTrustHtml(icons))
  }
}

In this specific use case we could use addSvgIconSetLiteral and an URL but the svg won't be part of the build anymore.

When it's part of the build we can have size stats about svg in our bundle and possibly get the .svg files hashed (cache busting), useful when you set multiple svg files inside a single svg using symbols (which angular component icon supports btw).

We could also import it directly in a template without having to create a svg component

Describe the solution you'd like

No response

Describe alternatives you've considered

As an alternative you can rename the .svg to .txt, it will be loaded using the esbuild text loader.

[KarlXOL]

Can't believe new build system has been released without having the option to at least configure this.
As it can be doe with custom-webpack, ...

[alan-agius4]

This is working as expected since SVG is not a valid ESM Module.

[KarlXOL]

This is working as expected since SVG is not a valid ESM Module.

It's not about "working as designed".
It's about missing functionality abailable in previous release of angular's toolpack, and making angular competitive compared to other SPA-Frameworks.

By the way, esbuild could be configured to deal with SVG. But in the way angular is integrating esbuild, there is possibility to configure esbuild loaders.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}