feat(feature-discovery): support ion-icon

Co-authored-by: Gary Großgarten <gary@fivethree.io>

Author: marcjulian

projects/core/ng-package.json

@@ -8,5 +8,8 @@
       "@ionic/angular": "ionic-angular",
       "hammerjs": "Hammer"
     }
-  }
+  },
+  "whitelistedNonPeerDependencies": [
+    "@fivethree/ngx-rxjs-animations"
+  ]
 }

projects/core/ng-package.prod.json

@@ -9,5 +9,8 @@
       "@ionic/angular": "ionic-angular",
       "hammerjs": "Hammer"
     }
-  }
+  },
+  "whitelistedNonPeerDependencies": [
+    "@fivethree/ngx-rxjs-animations"
+  ]
 }

projects/core/src/lib/feature-discovery/feature-discovery.component.ts

@@ -1,4 +1,4 @@
-import { Platform } from '@ionic/angular';
+import { Platform, IonIcon } from '@ionic/angular';
 import {
   Component,
   OnInit,
@@ -180,7 +180,7 @@ export class FivFeatureDiscovery implements OnInit, AfterContentInit {
     this.animationState = 'execute';
   }
 
-  setIcon(icon: FivIcon) {
+  setIcon(icon: FivIcon | IonIcon) {
     if (icon) {
       this.icon = icon.name;
     }

projects/core/src/lib/feature-discovery/feature.directive.ts

@@ -15,7 +15,7 @@ import {
 import { FivOverlayService } from '../overlay/overlay.service';
 import { FivFeatureDiscovery } from './feature-discovery.component';
 import { first, filter } from 'rxjs/operators';
-import { Platform } from '@ionic/angular';
+import { Platform, IonIcon } from '@ionic/angular';
 
 @Directive({
   selector: '[fivFeature]',
@@ -41,7 +41,8 @@ export class FivFeature {
   constructor(
     @Host() private host: ElementRef,
     private viewContainer: ViewContainerRef,
-    @Host() @Optional() private icon: FivIcon,
+    @Host() @Optional() private fivIcon: FivIcon,
+    @Host() @Optional() private ionIcon: IonIcon,
     private overlay: FivOverlayService,
     private platform: Platform
   ) {}
@@ -57,7 +58,8 @@ export class FivFeature {
   }
 
   show() {
-    const bounds = this.icon
+    const icon = this.ionIcon || this.fivIcon;
+    const bounds = icon
       ? this.getBounds(this.host.nativeElement.parentElement)
       : this.getBounds(this.host.nativeElement);
 
@@ -71,7 +73,7 @@ export class FivFeature {
     featureOverlay.width = this.diameter;
     featureOverlay.featurePadding = this.featurePadding;
     featureOverlay.contentOffset = this.contentOffset;
-    featureOverlay.setIcon(this.icon);
+    featureOverlay.setIcon(icon);
     featureOverlay.setBounds(bounds);
     featureOverlay.show();
     this.fivWillOpen.emit();