feat: add eva-icons (#1912)

src/app/@theme/pipes/eva-icons.pipe.ts

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { DomSanitizer } from '@angular/platform-browser';
+import { Pipe, PipeTransform } from '@angular/core';
+import { icons } from 'eva-icons';
+
+@Pipe({ name: 'eva' })
+export class EvaIconsPipe implements PipeTransform {
+
+  private defaultOptions = {
+    height: 24,
+    width: 24,
+    fill: 'inherit',
+    animationHover: true,
+    animationInfinity: false,
+  };
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  transform(icon: string,
+            options: {
+              height: number;
+              width: number;
+              fill: string;
+              animationType?: string;
+              animationHover?: boolean;
+              animationInfinity?: boolean;
+            },
+  ) {
+    const mergedOptions = {
+      ...this.defaultOptions,
+      ...options,
+    };
+    const { width, height, fill, animationType, animationHover, animationInfinity } = mergedOptions;
+    const animation = animationType ?
+      { type: animationType, hover: animationHover, infinite: animationInfinity } :
+      null;
+
+    return this.sanitizer.bypassSecurityTrustHtml(icons[icon].toSvg({
+      width,
+      height,
+      fill,
+      animation,
+    }));
+  }
+}

src/app/@theme/pipes/index.ts

@@ -3,3 +3,4 @@ export * from './plural.pipe';
 export * from './round.pipe';
 export * from './timing.pipe';
 export * from './number-with-commas.pipe';
+export * from './eva-icons.pipe';

src/app/@theme/theme.module.ts

@@ -57,6 +57,7 @@ import {
   RoundPipe,
   TimingPipe,
   NumberWithCommasPipe,
+  EvaIconsPipe,
 } from './pipes';
 import {
   OneColumnLayoutComponent,
@@ -132,6 +133,7 @@ const PIPES = [
   RoundPipe,
   TimingPipe,
   NumberWithCommasPipe,
+  EvaIconsPipe,
 ];
 
 const NB_THEME_PROVIDERS = [

src/app/pages/ui-features/icons/icons.component.html

@@ -1,4 +1,22 @@
 <div class="row">
+  <div class="col-md-12 col-lg-6">
+    <nb-card>
+      <nb-card-header>
+        Eva Icons
+      </nb-card-header>
+      <nb-card-body>
+        <div class="icon" *ngFor="let icon of evaIcons">
+          <i [nbPopover]="icon">
+            <i [innerHTML]="icon | eva: { fill: '#d1d1ff', animationType: 'pulse' }"></i>
+          </i>
+        </div>
+      </nb-card-body>
+      <nb-card-footer>
+        <a href="https://akveo.github.io/eva-icons/" target="_blank">See all eva-icons</a>
+      </nb-card-footer>
+    </nb-card>
+  </div>
+
   <div class="col-md-12 col-lg-6">
     <nb-card class="nb-icons">
       <nb-card-header>
@@ -28,9 +46,7 @@
         </a>
       </nb-card-footer>
     </nb-card>
-  </div>
 
-  <div class="col-md-12 col-lg-6">
     <nb-card>
       <nb-card-header>
         Ionicons
@@ -41,8 +57,9 @@
         </div>
       </nb-card-body>
       <nb-card-footer>
-        <a href="http://ionicons.com/" target="_blank">See all ionicons icons</a>
+        <a href="http://ionicons.com/" target="_blank">See all ionicons</a>
       </nb-card-footer>
     </nb-card>
+
   </div>
 </div>

src/app/pages/ui-features/icons/icons.component.ts

@@ -1,12 +1,20 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { icons } from 'eva-icons';
 
 @Component({
   selector: 'ngx-icons',
   styleUrls: ['./icons.component.scss'],
   templateUrl: './icons.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class IconsComponent {
 
+  evaIcons = [];
+
+  constructor() {
+    this.evaIcons = Object.keys(icons).filter(icon => icon.indexOf('outline') === -1);
+  }
+
   icons = {
 
     nebular: ['nb-alert', 'nb-angle-double-left', 'nb-angle-double-right',