Fix dynamic icon path bug (in combination with fixed forRoot sprite p…

…ath), resolves #25

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 Janek
+Copyright (c) 2017 Jan Suwart
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

README.md

@@ -189,7 +189,7 @@ Doing so you will still be able override the default path by using the full synt
 - Edge
 - IE 11 (with polyfill, see below)
 
-### Polyfill for IE11 (and comparable)
+### Polyfill for IE11
 
 Older browsers do not support referencing to (external) SVG symbols. To make it work for IE11 and lower you can add
 [svg4everybody](https://github.com/jonathantneal/svg4everybody) to your `polyfills.ts` file:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-svg-icon-sprite-app",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "license": "MIT",
   "author": "Jan Suwart",
   "description": "Angular 7+ package for generating and using inline SVG icons in your project",
@@ -73,6 +73,7 @@
   },
   "keywords": [
     "icon",
+    "icons",
     "svg",
     "sprite",
     "angular"

projects/icon-sprite/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 Janek
+Copyright (c) 2017 Jan Suwart
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

projects/icon-sprite/README.md

@@ -189,7 +189,7 @@ Doing so you will still be able override the default path by using the full synt
 - Edge
 - IE 11 (with polyfill, see below)
 
-### Polyfill for IE11 (and comparable)
+### Polyfill for IE11
 
 Older browsers do not support referencing to (external) SVG symbols. To make it work for IE11 and lower you can add
 [svg4everybody](https://github.com/jonathantneal/svg4everybody) to your `polyfills.ts` file:

projects/icon-sprite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-svg-icon-sprite",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "license": "MIT",
   "author": "Jan Suwart",
   "description": "Angular 7 package for generating and using inline SVG icons in your project",
@@ -17,6 +17,7 @@
   },
   "keywords": [
     "icon",
+    "icons",
     "svg",
     "sprite",
     "angular"

projects/icon-sprite/src/lib/icon-sprite.component.spec.ts

@@ -150,6 +150,10 @@ describe('IconSpriteComponent using Service', () => {
       component = fixture.componentInstance;
       component.src = 'star';
       component.title = 'A title text';
+
+      // Simulate simple input change
+      // See https://medium.com/@christophkrautz/testing-ngonchanges-in-angular-components-bbb3b4650ee8
+      component.ngOnChanges({});
       fixture.detectChanges();
 
       const nativeElement: HTMLElement = fixture.nativeElement;

projects/icon-sprite/src/lib/icon-sprite.component.ts

@@ -1,12 +1,12 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 import { IconSpriteService } from './icon-sprite.service';
 
 @Component({
   selector: 'svg-icon-sprite',
   styleUrls: ['./icon-sprite.component.scss'],
   templateUrl: './icon-sprite.component.html'
 })
-export class IconSpriteComponent implements OnInit {
+export class IconSpriteComponent implements OnChanges {
 
   @Input() public src: string;
   @Input() public classes = 'icon';
@@ -21,8 +21,8 @@ export class IconSpriteComponent implements OnInit {
     private iconSpriteService: IconSpriteService
   ) {}
 
-  ngOnInit() {
-    // If the src does not contain a # and a spritePath is set, concatenate it
+  ngOnChanges(changes) {
+    // If the src does not contain a # and a spritePath is set via the service, concatenate them
     if (this.src && !this.src.includes('#') && this.iconSpriteService.spritePath) {
       this.src = `${ this.iconSpriteService.getPath() }#${ this.src }`;
     }

src/app/app.component.html

@@ -141,7 +141,8 @@ <h2 id="manipulation">Manipulation <small>(using dynamic icon path)</small></h2>
   <ul class="vertical">
     <li class="icon-change-size">
       <div class="icon-row" [style.color]="color">
-        <svg-icon-sprite #iconSprite [src]="'assets/sprites/sprite.svg#' + icon" [width]="width" [viewBox]="'0 0 100 100'"></svg-icon-sprite>
+        <svg-icon-sprite #iconSprite [src]="icon" [width]="width" [viewBox]="'0 0 100 100'"></svg-icon-sprite>
+        <!-- Alternatively use the full sprite path via: [src]="'assets/sprites/sprite.svg#' + icon" -->
       </div>
       <pre style="height: 30px;">&lt;svg-icon-sprite [src]="icon" [width]="width" [viewBox]="'0 0 100 100'"&gt;&lt;/svg-icon&gt;</pre>
     </li>

src/app/app.component.ts

@@ -23,6 +23,7 @@ export class AppComponent implements OnInit {
 
   changeIconPath(src) {
     this.icon = src.split('#')[1] === 'delete_70x70' ? 'star_100x100_viewbox' : 'delete_70x70';
+    console.log('changed path', this.icon);
   }
 
   changeIconSizePlus(width) {