Add resolveSVGUrl option (closes #115)

README.md

@@ -64,6 +64,7 @@ The SVG file (if found) will be inserted *inside* the element with the `[inlineS
 | Property name | Type | Default | Description |
 | ------------- | ---- | ------- | ----------- |
 | cacheSVG | boolean | `true` | Caches the SVG based on the absolute URL. Cache only persists for the (sessional) lifetime of the page. |
+| resolveSVGUrl | boolean | `true` | Bypass logic that tries to determine the absolute URL using the page's or configured base URL. |
 | prepend | boolean | `false` | Inserts before the first child instead of appending, overwrites `replaceContents` |
 | replaceContents | boolean | `true` | Replaces the contents of the element with the SVG instead of just appending it to its children. |
 | injectComponent | boolean | `false` | Injects an `<inline-svg>` component containing the SVG inside the element with the directive. |

src/inline-svg.directive.ts

@@ -31,6 +31,7 @@ import * as SvgUtil from './svg-util';
 })
 export class InlineSVGDirective implements OnInit, OnChanges, OnDestroy {
   @Input() inlineSVG: string;
+  @Input() resolveSVGUrl: boolean = true;
   @Input() replaceContents: boolean = true;
   @Input() prepend: boolean = false;
   @Input() injectComponent: boolean = false;
@@ -106,7 +107,7 @@ export class InlineSVGDirective implements OnInit, OnChanges, OnDestroy {
     }
     this._prevUrl = this.inlineSVG;
 
-    this._subscription = this._svgCache.getSVG(this.inlineSVG, this.cacheSVG)
+    this._subscription = this._svgCache.getSVG(this.inlineSVG, this.resolveSVGUrl, this.cacheSVG)
       .subscribe(
         (svg: SVGElement) => {
           if (SvgUtil.isUrlSymbol(this.inlineSVG)) {

src/svg-cache.service.ts

@@ -5,7 +5,6 @@ import { Observable, of } from 'rxjs';
 import { finalize, map, share } from 'rxjs/operators';
 import { InlineSVGConfig } from './inline-svg.config';
 
-
 @Injectable({
   providedIn: 'root'
 })
@@ -37,34 +36,36 @@ export class SVGCacheService {
     }
   }
 
-  getSVG(url: string, cache: boolean = true): Observable<SVGElement> {
-    const absUrl = this.getAbsoluteUrl(url);
+  getSVG(url: string, resolveSVGUrl: boolean, cache: boolean = true): Observable<SVGElement> {
+    const svgUrl = resolveSVGUrl
+      ? this.getAbsoluteUrl(url)
+      : url;
 
     // Return cached copy if it exists
-    if (cache && SVGCacheService._cache.has(absUrl)) {
-      return of(this._cloneSVG(SVGCacheService._cache.get(absUrl)));
+    if (cache && SVGCacheService._cache.has(svgUrl)) {
+      return of(this._cloneSVG(SVGCacheService._cache.get(svgUrl)));
     }
 
     // Return existing fetch observable
-    if (SVGCacheService._inProgressReqs.has(absUrl)) {
-      return SVGCacheService._inProgressReqs.get(absUrl);
+    if (SVGCacheService._inProgressReqs.has(svgUrl)) {
+      return SVGCacheService._inProgressReqs.get(svgUrl);
     }
 
     // Otherwise, make the HTTP call to fetch
-    const req = this._http.get(absUrl, { responseType: 'text' })
+    const req = this._http.get(svgUrl, { responseType: 'text' })
       .pipe(
         finalize(() => {
-          SVGCacheService._inProgressReqs.delete(absUrl);
+          SVGCacheService._inProgressReqs.delete(svgUrl);
         }),
         share(),
         map((svgText: string) => {
           const svgEl = this._svgElementFromString(svgText);
-          SVGCacheService._cache.set(absUrl, svgEl);
+          SVGCacheService._cache.set(svgUrl, svgEl);
           return this._cloneSVG(svgEl);
         })
       );
 
-    SVGCacheService._inProgressReqs.set(absUrl, req);
+    SVGCacheService._inProgressReqs.set(svgUrl, req);
 
     return req;
   }