Merge pull request #22 from czeckd/svg-unload

SVG unload

app/demo-app.component.css

@@ -0,0 +1,61 @@
+button {
+	-webkit-border-radius: 4;
+	-moz-border-radius: 4;
+	border-radius: 4px;
+	color: #000;
+	font-size: 12px;
+	background: #aaa;
+	padding: 4px 15px;
+	margin: 8px 2px;
+	border: solid #000 1px;
+	text-decoration: none;
+}
+
+button:hover {
+	background: #555;
+	color: #aaa;
+	text-decoration: none;
+}
+
+.explain {
+	max-width: 500px;
+	font-size: 14px;
+}
+
+
+svg-icon.red {
+	fill: red;
+	width: 90px;
+	float: left;
+}
+
+svg-icon.green {
+	fill: green;
+	width: 90px;
+	float: left;
+	margin-left: 20px;
+}
+
+svg-icon.blue {
+	fill: blue;
+	width: 90px;
+	float: left;
+	margin-left: 20px;
+}
+
+svg-icon.inline {
+	fill: black;
+	width: 14px;
+}
+
+pre {
+	font-size: 12px;
+}
+
+fieldset {
+	border: none;
+}
+
+fieldset input {
+	margin-right: 10px;
+}

app/demo-app.component.html

@@ -1,12 +1,12 @@
 <div style="margin:15px;">
 	<div style="width:500px;">
-		<svg-icon src="images/eye.svg" style="fill:red;width:90px;float:left;"></svg-icon>
-		<svg-icon src="images/eye.svg" style="fill:green;width:90px;float:left;margin-left:20px;"></svg-icon>
-		<svg-icon src="images/eye.svg" style="fill:blue;width:90px;float:left;margin-left:20px;"></svg-icon>
+		<svg-icon src="images/eye.svg" class="red"></svg-icon>
+		<svg-icon src="images/eye.svg" class="green"></svg-icon>
+		<svg-icon src="images/eye.svg" class="blue"></svg-icon>
 	</div>
 
 	<form style="clear:both;">
-		<h2>Set the style</h2>
+		<h2>Set the SVG style</h2>
 		<fieldset style="border:none;">
 			<label>red:</label> <input type="number" min="0" max="255" [(ngModel)]="r" name="red">
 			<label>green:</label> <input type="number" min="0" max="255" [(ngModel)]="g" name="green">
@@ -15,8 +15,23 @@ <h2>Set the style</h2>
 		<label>width:</label> <input type="number" min="0" max="1000" [(ngModel)]="w" name="width"><label> px</label>
 	</form>
 
-	<svg-icon src="images/eye.svg" [ngStyle]="{'width': w + 'px', 'fill': 'rgb(' + r + ',' + g + ',' + b + ')' }"></svg-icon>
+	<div *ngIf="display">
+		<svg-icon src="images/eye.svg" [ngStyle]="{'width': w + 'px', 'fill': 'rgb(' + r + ',' + g + ',' + b + ')' }"></svg-icon>
 
-<small><pre>&lt;svg-icon src="images/eye.svg" 
-  style="{{getStyle()}}"&gt;&lt;/svg-icon&gt;</pre></small>
+		<pre>&lt;svg-icon src="images/eye.svg" 
+  style="{{getStyle()}}"&gt;
+&lt;/svg-icon&gt;</pre>
+	</div>
+
+	<button (click)="unload('images/eye.svg');display=!display">{{display ? 'Unload SVG' : 'Reload SVG'}}</button>
+
+	<div class="explain">
+		<p *ngIf="display">Unloading the SVG will remove it from the registry. The next time the &lt;svg&#8209;icon&gt; is 
+		used with the SVG's URL, the SVG will be loaded again.  Unloading will not remove a SVG already displayed in
+		the document as can be seen by the persistence of the three <svg-icon src="images/eye.svg" class="inline">
+		</svg-icon> SVG at the top of the page.</p>
+
+		<p *ngIf="!display">Reloading the SVG will cause an http fetch to occur to load the SVG into the registry 
+		where it will persist until programatically unloaded.</p>
+	</div>
 </div>

app/demo-app.component.ts

@@ -1,18 +1,30 @@
 import { Component } from '@angular/core';
+import { SvgIconRegistryService } from 'angular-svg-icon/index';
+
 
 @Component({
 	selector: 'demo-app',
-	styles : [ 'fieldset input { margin-right: 10px; }' ],
+	styleUrls: [ 'app/demo-app.component.css' ],
 	templateUrl: 'app/demo-app.component.html'
 })
 
 export class DemoAppComponent {
 	private r = 120;
 	private g = 120;
 	private b = 120;
-	private w = 75;
+	private w = 175;
+
+	display = true;
+
+	constructor(private registry:SvgIconRegistryService) {
+	}
 
 	getStyle(): string {
 		return 'width:' + this.w + 'px;fill:rgb(' + this.r + ',' + this.g + ',' + this.b + ');';
 	}
+
+	unload(url:string) {
+		this.registry.unloadSvg(url);
+	}
+
 }

app/main.ts

@@ -1,5 +1,8 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
 
 import { AppModule } from './app.module';
 
+enableProdMode();
+
 platformBrowserDynamic().bootstrapModule( AppModule );

lib/svg-icon-registry.service.ts

@@ -44,4 +44,11 @@ export class SvgIconRegistryService {
 			return o;
 		}
 	}
+
+	unloadSvg(url:string) {
+		if (this.iconsByUrl.has(url)) {
+			this.iconsByUrl.delete(url);
+		}
+	}
+
 }

lib/svg-icon.component.ts

@@ -28,12 +28,14 @@ export class SvgIconComponent implements OnInit, OnDestroy {
 	}
 
 	ngOnDestroy() {
-		this.icnSub.unsubscribe();
+		if (this.icnSub) {
+			this.icnSub.unsubscribe();
+		}
 	}
 
 	private setSvg(svg:SVGElement) {
 		const icon = <SVGElement>svg.cloneNode(true);
-		let elem = this.element.nativeElement;
+		const elem = this.element.nativeElement;
 		elem.innerHTML = '';
 		this.renderer.projectNodes(elem, [icon]);
 	}
@@ -47,4 +49,4 @@ export const SVG_ICON_REGISTRY_PROVIDER = {
 	provide: SvgIconRegistryService,
 	deps: [ [new Optional(), new SkipSelf(), SvgIconRegistryService], Http],
 	useFactory: SVG_ICON_REGISTRY_PROVIDER_FACTORY
-}
+};

package.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-svg-icon",
   "description": "Angular 2+ component for inlining SVGs allowing them to be easily styled with CSS.",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/czeckd/angular-svg-icon.git"
@@ -23,7 +23,7 @@
     "clean": "rimraf runt dist",
     "dist": "tools/mkdist",
     "lite": "lite-server",
-    "lint": "tslint -c tslint.json ./app/**/*.ts -t verbose || true"
+    "lint": "tslint -c tslint.json ./app/**/*.ts ./lib/**/*.ts -t verbose || true"
   },
   "peerDependencies": {
     "@angular/core": "^2.4.0 || ^4.0.0",
@@ -51,6 +51,6 @@
     "ts-node": "^3.0.2",
     "tslint": "~4.5.0",
     "typescript": "~2.2.0",
-    "zone.js": "^0.8.4"
+    "zone.js": "^0.8.12"
   }
 }