Merge pull request #27 from czeckd/change-src

Change src

README.md

@@ -44,6 +44,33 @@ An example of styling the svg:
 <svg-icon src="images/eye.svg" style="fill:green;width:90px;"></svg-icon>
 ```
 
+Programatic interaction with the registry is also possible.
+Include the ``private iconReg:SvgIconRegistryService`` in the constructor:
+```typescript
+constructor(private iconReg:SvgIconRegistryService) { }
+```
+
+The registry has two public functions: `loadSvg(string)` and `unloadSvg(string)`.
+
+To preload a svg file into the registry: 
+
+```typescript
+{
+   ...
+   this.iconReg.loadSvg('foo.svg');
+}
+``` 
+
+To unload a svg from the registry.
+
+```typescript
+{
+    ...
+    this.iconReg.unloadSvg('foo.svg');
+}
+```
+
+
 ## Background
 
 The svg-icon is an Angular 2 component that allows for the continuation of the 
@@ -67,5 +94,5 @@ MIT
 
 
 ## Author
-- David Czeck [@czeckd](https://github/czeckd)
+- David Czeck [@czeckd](https://github.com/czeckd)
 

app/demo-app.component.css

@@ -9,6 +9,7 @@ button {
 	margin: 8px 2px;
 	border: solid #000 1px;
 	text-decoration: none;
+	width: 100px;
 }
 
 button:hover {

app/demo-app.component.html

@@ -16,17 +16,24 @@ <h2>Set the SVG style</h2>
 	</form>
 
 	<div *ngIf="display">
-		<svg-icon src="images/eye.svg" [ngStyle]="{'width': w + 'px', 'fill': 'rgb(' + r + ',' + g + ',' + b + ')' }"></svg-icon>
+		<svg-icon [src]="img[onImg]" [ngStyle]="{'width': w + 'px', 'fill': 'rgb(' + r + ',' + g + ',' + b + ')' }"></svg-icon>
 
-		<pre>&lt;svg-icon src="images/eye.svg" 
+		<pre>&lt;svg-icon src="{{img[onImg]}}" 
   style="{{getStyle()}}"&gt;
 &lt;/svg-icon&gt;</pre>
 	</div>
 
-	<button (click)="unload('images/eye.svg');display=!display">{{display ? 'Unload SVG' : 'Reload SVG'}}</button>
+	<div>
+		<button (click)="swapImg()">Swap SVG</button>
+		<pre style="display:inline-block;">Source {{img[onImg]}}</pre>
+	</div>
+	<div>
+		<button (click)="unload(img[onImg])">{{display ? 'Unload SVG' : 'Reload SVG'}}</button>
+		<pre style="display:inline-block;">{{message}}</pre>
+	</div>
 
 	<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 
+		<p [hidden]="!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>

app/demo-app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { SvgIconRegistryService } from 'angular-svg-icon/index';
+import { SvgIconRegistryService } from 'angular-svg-icon';
 
 
 @Component({
@@ -15,6 +15,9 @@ export class DemoAppComponent {
 	private w = 175;
 
 	display = true;
+	img = [ 'images/eye.svg', 'images/moon-o.svg' ];
+	onImg = 0;
+	message = '';
 
 	constructor(private registry:SvgIconRegistryService) {
 	}
@@ -24,7 +27,23 @@ export class DemoAppComponent {
 	}
 
 	unload(url:string) {
-		this.registry.unloadSvg(url);
+		if (this.display) {
+			this.display = false;
+			this.registry.unloadSvg(url);
+
+			setTimeout( () => {
+				this.message = '';
+			}, 2000);
+
+			this.message = url + ' unloaded';
+
+		} else {
+			this.display = true;
+		}
+	}
+
+	swapImg() {
+		this.onImg = (this.onImg === 1 ? 0 : 1);
 	}
 
 }

images/README.md

@@ -1,5 +1,5 @@
-# About eye.svg
-The eye.svg is modified to remove the height and width attributes from the file 
+# About eye.svg and moon-o.svg
+The svg files were modified to remove the height and width attributes from the file 
 per Sara Soueidan's advice in "[Making SVGs Responsive With 
 CSS](http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/)".
 
@@ -10,5 +10,7 @@ CSS](http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/)".
 > present. After removing the height and width, you can embed the SVG in one of 
 > several ways on the page.
  
-The original found as part of the Font-Awesome-SVG-PNG library on GitHub at 
-https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/eye.svg.
+The originals found as part of the Font-Awesome-SVG-PNG library on GitHub at:
+* [eye.svg](https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/eye.svg)
+* [moon.svg](https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/moon-o.svg)
+

lib/svg-icon.component.ts

@@ -1,4 +1,5 @@
-import { Component, ElementRef, Input, OnDestroy, OnInit, Optional, Renderer, SkipSelf } from '@angular/core';
+import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, Optional,
+	Renderer, SimpleChange, SkipSelf } from '@angular/core';
 import { Http } from '@angular/http';
 
 import { Subscription } from 'rxjs/Subscription';
@@ -12,7 +13,7 @@ import { SvgIconRegistryService } from './svg-icon-registry.service';
 	template: '<ng-content></ng-content>'
 })
 
-export class SvgIconComponent implements OnInit, OnDestroy {
+export class SvgIconComponent implements OnInit, OnDestroy, OnChanges {
 	@Input() src:string;
 
 	private icnSub:Subscription;
@@ -22,12 +23,27 @@ export class SvgIconComponent implements OnInit, OnDestroy {
 	}
 
 	ngOnInit() {
+		this.init();
+	}
+
+	ngOnDestroy() {
+		this.destroy();
+	}
+
+	ngOnChanges(changeRecord: {[key:string]:SimpleChange}) {
+		if (changeRecord['src']) {
+			this.destroy();
+			this.init();
+		}
+	}
+
+	private init() {
 		this.icnSub = this.iconReg.loadSvg(this.src).subscribe(svg => {
 			this.setSvg(svg);
 		});
 	}
 
-	ngOnDestroy() {
+	private destroy() {
 		if (this.icnSub) {
 			this.icnSub.unsubscribe();
 		}
@@ -47,6 +63,6 @@ export function SVG_ICON_REGISTRY_PROVIDER_FACTORY(parentRegistry:SvgIconRegistr
 
 export const SVG_ICON_REGISTRY_PROVIDER = {
 	provide: SvgIconRegistryService,
-	deps: [ [new Optional(), new SkipSelf(), SvgIconRegistryService], Http],
+	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.2.0",
+  "version": "4.2.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/czeckd/angular-svg-icon.git"