From 38029bd1d713c7f535594ed3281d8fd99728f903 Mon Sep 17 00:00:00 2001
From: emanuelefricano93 <emanuelefricano93@gmail.com>
Date: Mon, 22 Mar 2021 13:58:47 +0100
Subject: [PATCH] Adding fallbackSVG Input (#164)

* Adding fallbackSVG Input

* Adding fallbackSVG Input in README

* Minor formatting

Co-authored-by: emanuele.fricano <emanuele.fricano@rgigroup.com>
Co-authored-by: arkon <arkon@users.noreply.github.com>
---
 README.md                       | 1 +
 demo/src/demo/demo.component.ts | 1 +
 src/inline-svg.directive.ts     | 4 ++++
 3 files changed, 6 insertions(+)

diff --git a/README.md b/README.md
index 343b427..d5c43ab 100644
--- a/README.md
+++ b/README.md
@@ -77,6 +77,7 @@ The SVG file (if found) will be inserted *inside* the element with the `[inlineS
 | forceEvalStyles | boolean | `false` | Forces embeded style tags' contents to be evaluated (for IE 11). |
 | evalScripts | `'always'`, `'once'`, `'none'` | `'always'` | Whether to evaluate embedded scripts in the loaded SVG files. The `SVGScriptEvalMode` enum is also provided. |
 | fallbackImgUrl | string | | URL for a regular image to be displayed as a fallback if the SVG fails to load. |
+| fallbackSVG | string | | SVG filename to be displayed as a fallback if the SVG fails to load. |
 | onSVGLoaded | `(svg: SVGElement, parent: Element \| null) => SVGElement` | | Lifecycle hook that allows the loaded SVG to be manipulated prior to insertion. |
 
 #### Outputs
diff --git a/demo/src/demo/demo.component.ts b/demo/src/demo/demo.component.ts
index 80c8ad9..5bf9ee6 100644
--- a/demo/src/demo/demo.component.ts
+++ b/demo/src/demo/demo.component.ts
@@ -12,6 +12,7 @@ import { Component, OnInit } from '@angular/core';
     <div><button (click)="updateSize(10)">Increase</button><button (click)="updateSize(-10)">Decrease</button></div>
     <div [inlineSVG]="'#fish'" [setSVGAttributes]="_changeAttrs"></div>
     <div [inlineSVG]="'img/nope.svg'" [fallbackImgUrl]="'https://nodei.co/npm/ng-inline-svg.png?compact=true'"></div>
+    <div [inlineSVG]="'img/nope.svg'" [fallbackSVG]="'#fish'"></div>
   `
 })
 export class DemoComponent implements OnInit {
diff --git a/src/inline-svg.directive.ts b/src/inline-svg.directive.ts
index 8741152..3289903 100644
--- a/src/inline-svg.directive.ts
+++ b/src/inline-svg.directive.ts
@@ -41,6 +41,7 @@ export class InlineSVGDirective implements OnInit, OnChanges, OnDestroy {
   @Input() forceEvalStyles: boolean = false;
   @Input() evalScripts: SVGScriptEvalMode = SVGScriptEvalMode.ALWAYS;
   @Input() fallbackImgUrl: string;
+  @Input() fallbackSVG: string;
   @Input() onSVGLoaded: (svg: SVGElement, parent: Element | null) => SVGElement;
 
   @Output() onSVGInserted: EventEmitter<SVGElement> = new EventEmitter<SVGElement>();
@@ -198,6 +199,9 @@ export class InlineSVGDirective implements OnInit, OnChanges, OnDestroy {
       this._renderer.setAttribute(elImg, 'src', this.fallbackImgUrl);
 
       this._insertEl(elImg);
+    } else if (this.fallbackSVG && this.fallbackSVG !== this.inlineSVG) {
+      this.inlineSVG = this.fallbackSVG;
+      this._insertSVG();
     }
   }