From 7a57c187a3c10471b8d8238973c55b8bdf80a394 Mon Sep 17 00:00:00 2001 From: David Czeck Date: Wed, 23 Aug 2017 19:13:24 -0700 Subject: [PATCH 1/5] Add moon svg --- images/moon-o.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 images/moon-o.svg diff --git a/images/moon-o.svg b/images/moon-o.svg new file mode 100644 index 0000000..b78b7c5 --- /dev/null +++ b/images/moon-o.svg @@ -0,0 +1 @@ + From 6d4e85c96d7fd200d63e5f7bef277bcc3a3f5eb1 Mon Sep 17 00:00:00 2001 From: David Czeck Date: Wed, 23 Aug 2017 19:13:45 -0700 Subject: [PATCH 2/5] Update README files --- README.md | 29 ++++++++++++++++++++++++++++- images/README.md | 10 ++++++---- 2 files changed, 34 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 07fec5f..84488f6 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,33 @@ An example of styling the svg: ``` +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) diff --git a/images/README.md b/images/README.md index d7c6754..6b3e8cd 100644 --- a/images/README.md +++ b/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) + From 8566bb43c5b8f493a051acf025171e5844aee21e Mon Sep 17 00:00:00 2001 From: David Czeck Date: Wed, 23 Aug 2017 19:45:10 -0700 Subject: [PATCH 3/5] Update demo app for programatically changing svg src. --- app/demo-app.component.css | 1 + app/demo-app.component.html | 15 +++++++++++---- app/demo-app.component.ts | 23 +++++++++++++++++++++-- 3 files changed, 33 insertions(+), 6 deletions(-) diff --git a/app/demo-app.component.css b/app/demo-app.component.css index 57a90b9..7b6e28a 100644 --- a/app/demo-app.component.css +++ b/app/demo-app.component.css @@ -9,6 +9,7 @@ button { margin: 8px 2px; border: solid #000 1px; text-decoration: none; + width: 100px; } button:hover { diff --git a/app/demo-app.component.html b/app/demo-app.component.html index 129fc66..5dc74a9 100644 --- a/app/demo-app.component.html +++ b/app/demo-app.component.html @@ -16,17 +16,24 @@

Set the SVG style

- + - 
<svg-icon src="images/eye.svg" 
+		
<svg-icon src="{{img[onImg]}}" 
   style="{{getStyle()}}">
 </svg-icon>
- +
+ + 
Source {{img[onImg]}}
+
+
+ + 
{{message}}
+
-

Unloading the SVG will remove it from the registry. The next time the <svg‑icon> is +

Unloading the SVG will remove it from the registry. The next time the <svg‑icon> 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 at the top of the page.

diff --git a/app/demo-app.component.ts b/app/demo-app.component.ts index 438a238..1b5cf68 100644 --- a/app/demo-app.component.ts +++ b/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); } } From 83d97d92dd40164e0d82a71b81d5990d96fa2ce5 Mon Sep 17 00:00:00 2001 From: David Czeck Date: Wed, 23 Aug 2017 19:46:27 -0700 Subject: [PATCH 4/5] Use ngOnChanges to detect src changes --- lib/svg-icon.component.ts | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/lib/svg-icon.component.ts b/lib/svg-icon.component.ts index 7365145..5b936f6 100644 --- a/lib/svg-icon.component.ts +++ b/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: '' }) -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 }; From adabd00036ae20c8b46f5ba0f8be9841996b02ee Mon Sep 17 00:00:00 2001 From: David Czeck Date: Wed, 23 Aug 2017 19:46:54 -0700 Subject: [PATCH 5/5] Rev version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 91e6b41..e7e08b6 100644 --- a/package.json +++ b/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"