Aurelia InlineSvg component, renders an SVG from file path

.Aurelia Inline SVG.md

Aurelia InlineSvg component

Renders an SVG from file path.

How to use

<inline-svg src="/assets/icons/icon.svg"></inline-svg>

inline-svg.ts

import { bindable, inject, inlineView } from 'aurelia-framework';
import { HttpClient } from 'aurelia-fetch-client';

@inlineView('<template></template>')
@inject(Element, HttpClient)
export class InlineSvg {
    @bindable private src: string;

    constructor(
        private el: HTMLElement,
        private http: HttpClient
    ) { }

    private bind(): void {
        this.updateSvg(this.src);
    }

    private srcChanged(src: string): void {
        this.updateSvg(src);
    }

    private async updateSvg(svgSrc): Promise<void> {
        if (svgSrc) {
            const currentSvg = this.el.innerHTML;
            const response = await this.http.fetch(svgSrc);
            const text = await response.text();
            this.el.innerHTML = text;
        }
    }
}