Renders an SVG from file path.
<inline-svg src="/assets/icons/icon.svg"></inline-svg>
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; | |
} | |
} | |
} |