Use the Observable<SVGElement> in the template (not src, not name)

Hi,

I’m trying this library which seems very cool. The thing I’m not sure if I use it correctly, so it may not be a bug.

I’m using the library to load specific svg to display it then it my template, by using the SvgIconRegistryService. The methods give an Observable<SVGElement> which is pretty cool because it allows then to add specific attributes later on such as preserveAspectRatio for example.

My issue is that when i try at this point to use my svg$, there is no method in the library to use the modified svg in the template with something like <svg-icon name=...> or <svg-icon src=....

My use case is a bit special, because ideally, i may have to change viewBox by giving an offset for x & y, or the preserveAspectRatio according to the orientation (landscape & portrait mode) + load different svgs. So, basically, I would need a way to use the Observable<SVGElement> that the methods give, for example with: <svg-icon [src]="(mySvg$ | async)"></svg-icon> or <svg-icon [name]="(mySvg$ | async)"></svg-icon> or

Maybe it is very straitforward, if so, please, share 😃!

Thanks

[czeckd]

Maybe this would be cleaner? No need to getSvgByName until you add the tailored SVG into the registry.

Use addSvg(name: string, data: string) to put the tailored SVG into the registry bypassing using the component to load the SVG. So first tune your svg, then add it to the registry.

import { Component } from '@angular/core';
import { SvgIconRegistryService } from 'angular-svg-icon';

@Component({
  selector: 'hello',
  template: `<div><svg-icon name="box"></svg-icon></div>
            <div *ngIf="showSecond"><svg-icon name="box"></svg-icon></div>`,
  styles: []
})
export class HelloComponent {
  private serializer = new XMLSerializer();
  showSecond = false;

  constructor(private iconReg: SvgIconRegistryService) {
    this.iconReg.addSvg('box',
      `<svg xmlns="http://www.w3.org/2000/svg" style="fill:green;width:100px;"
          viewBox="0 0 10 10">
        <path d="M1 1 L1 9 L9 9 L9 1 Z"/>
      </svg>`);

    setTimeout(() => {
      this.iconReg.getSvgByName('box').subscribe(svg => {
        svg.setAttribute('style', 'fill:purple;width:50px;');
        this.iconReg.unloadSvg('box');

        const s = this.serializer.serializeToString(svg);
        console.log(s);
        this.iconReg.addSvg('box', s);
        this.showSecond = true;
      });
    }, 3000);
  }
}

If you need to readjust the SVG, remove it from the registry (this.iconReg.unloadSvg('box')). Tune it, then add it back.

This way you only add to the registry when you’ve tuned the SVG to what you need it to be. Need to change, then get it, modify it, unload it, and add the changed SVG back to the registry.

[czeckd]

See #126 for security follow-up.