feat(@theme): add page container component, add eva pipe

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "eva-icons",
+  "name": "eva-icons-web",
   "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "eva-icons",
+  "name": "eva-icons-landing",
   "version": "0.0.1",
   "browserslist": [
     "> 1%",

src/app/@core/core.module.ts

@@ -3,6 +3,11 @@ import { CommonModule } from '@angular/common';
 
 import { throwIfAlreadyLoaded } from './module-import-guard';
 import { DataModule } from './data/data.module';
+import { EvaIconsPipe } from './pipes/eva-icons.pipe';
+
+const PIPES = [
+  EvaIconsPipe,
+];
 
 const NB_CORE_PROVIDERS = [
   ...DataModule.forRoot().providers,
@@ -12,8 +17,8 @@ const NB_CORE_PROVIDERS = [
   imports: [
     CommonModule,
   ],
-  exports: [],
-  declarations: [],
+  exports: [...PIPES],
+  declarations: [...PIPES],
 })
 export class CoreModule {
   constructor(@Optional() @SkipSelf() parentModule: CoreModule) {

src/app/@core/data/icon.service.ts

@@ -1,41 +1,32 @@
 import { of as observableOf,  Observable } from 'rxjs';
 import { Injectable } from '@angular/core';
 
+import { icons } from 'eva-icons';
+
 @Injectable()
 export class IconService {
 
-  private fakeIconsData = ['nb-alert', 'nb-angle-double-left', 'nb-angle-double-right',
-    'nb-arrow-down', 'nb-arrow-dropdown', 'nb-arrow-dropleft',
-    'nb-arrow-dropright', 'nb-arrow-dropup', 'nb-arrow-left', 'nb-arrow-retweet', 'nb-arrow-right',
-    'nb-arrow-thin-down', 'nb-arrow-thin-left', 'nb-arrow-thin-right', 'nb-arrow-thin-up',
-    'nb-arrow-up', 'nb-audio', 'nb-bar-chart', 'nb-checkmark', 'nb-chevron-down',
-    'nb-chevron-down-outline', 'nb-chevron-left', 'nb-chevron-left-outline', 'nb-chevron-right',
-    'nb-chevron-right-outline', 'nb-chevron-up', 'nb-chevron-up-outline', 'nb-close',
-    'nb-close-circled', 'nb-cloudy', 'nb-coffee-maker', 'nb-compose', 'nb-edit', 'nb-email',
-    'nb-flame-circled', 'nb-gear', 'nb-grid-a', 'nb-grid-a-outline', 'nb-grid-b', 'nb-grid-b-outline',
-    'nb-heart', 'nb-home', 'nb-keypad', 'nb-layout-centre', 'nb-layout-default', 'nb-layout-one-column',
-    'nb-layout-sidebar-left', 'nb-layout-sidebar-right', 'nb-layout-two-column', 'nb-lightbulb',
-    'nb-list', 'nb-location', 'nb-locked', 'nb-loop', 'nb-loop-circled', 'nb-menu', 'nb-notifications',
-    'nb-paper-plane', 'nb-partlysunny', 'nb-pause', 'nb-pause-outline', 'nb-person', 'nb-phone',
-    'nb-play', 'nb-play-outline', 'nb-plus', 'nb-plus-circled', 'nb-power', 'nb-power-circled',
-    'nb-rainy', 'nb-roller-shades', 'nb-search', 'nb-shuffle', 'nb-skip-backward',
-    'nb-skip-backward-outline', 'nb-skip-forward', 'nb-skip-forward-outline', 'nb-snowy-circled',
-    'nb-square', 'nb-square-outline', 'nb-star', 'nb-sunny', 'nb-sunny-circled', 'nb-tables', 'nb-title',
-    'nb-trash', 'nb-volume-high', 'nb-volume-mute', 'nb-drop', 'nb-drops', 'nb-info', 'nb-expand', 'nb-collapse',
-    'nb-e-commerce'];
-
   data: string[];
 
   constructor() {
-    this.data = this.fakeIconsData;
+    this.data = Object.keys(icons)
+      .reduce((result, item): any => {
+        if (item.indexOf('outline') === -1) {
+          result['fill'] = result['fill'].concat(item);
+        } else {
+          result['outline'] = result['outline'].concat(item);
+        }
+
+        return result;
+      }, { fill: [], outline: [] });
   }
 
-  getIconsData(): Observable<string[]> {
-    return observableOf(this.data);
+  getIconsData(type: string): Observable<string[]> {
+    return observableOf(this.data[type]);
   }
 
-  getFilteredIconsData(searchKey: string) {
-    const data = this.data.filter((item) => {
+  getFilteredIconsData(searchKey: string, type: string) {
+    const data = this.data[type].filter((item) => {
       return item.indexOf(searchKey) !== -1;
     });
 

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

@@ -0,0 +1,18 @@
+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 {
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  transform(icon: string, height: number = 24, width: number = 24, fill: string = 'inherit') {
+    return this.sanitizer.bypassSecurityTrustHtml(icons[icon].toSvg({
+      width,
+      height,
+      fill,
+    }));
+  }
+}

src/app/@theme/components/footer/footer.component.scss

@@ -1,6 +1,6 @@
 @import '../../../@theme/styles/themes';
 @import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   $text-fg: nb-theme(footer-fg);

src/app/@theme/components/header/header.component.html

@@ -1,7 +1,7 @@
 <div class="section left">
   <div class="logo">
     <a routerLink="/">Eva Icons</a>
-    <span class="version">V.{{ currentVersion }}</span>
+    <span class="version">V{{ currentVersion }}</span>
   </div>
   <iframe class="stars"
           src="https://ghbtns.com/github-btn.html?user=akveo&repo=nebular&type=star&count=true"
@@ -11,9 +11,14 @@
 </div>
 <div class="section right">
   <nb-menu [items]="mainMenu"></nb-menu>
-  <button class="btn btn-primary btn-download"
-          (click)="openIconsDowloadModal()">
-    <i class="nb-star"></i>
+  <a class="btn btn-header btn-npm">
+    <i class="npm-icon"></i>
+    <span>Npm</span>
+  </a>
+  <a class="btn btn-primary btn-download btn-header"
+     href="dist/eva-icons.zip"
+     download>
+    <i [innerHTML]="'download' | eva : 24 : 24 : '#ffffff' "></i>
     <span>Download</span>
-  </button>
+  </a>
 </div>

src/app/@theme/components/header/header.component.scss

@@ -1,6 +1,6 @@
 @import '../../../@theme/styles/themes';
 @import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   $right-section-width: nb-theme(settings-col-width);
@@ -106,7 +106,7 @@
     }
   }
 
-  .btn-download {
+  .btn-header {
     display: flex;
     align-items: center;
     margin-left: 2rem;
@@ -125,6 +125,29 @@
     }
   }
 
+  .btn-npm {
+    color: nb-theme(color-fg);
+    margin-left: 4rem;
+    border: 1px solid nb-theme(header-button-border);
+    font-weight: nb-theme(font-weight-ultra-bold);
+
+    &:hover {
+      background-color: nb-theme(header-button-border);
+    }
+
+    span {
+      text-transform: uppercase;
+    }
+  }
+
+  .npm-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    background: url('../../../../assets/img/npm.svg') no-repeat;
+    background-position: 50% 50%;
+    background-size: cover;
+  }
+
   @include media-breakpoint-down(xl) {
     margin: 0 1rem;
   }

src/app/@theme/components/header/header.component.ts

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 import { EvoVersionService } from '../../services/version.service';
-import { NbMenuItem, NbModalService } from '@nebular/theme';
-
-import { DownloadIconsComponent } from '../modals/download-icons/download-icons.component';
+import { NbMenuItem } from '@nebular/theme';
 
 @Component({
   selector: 'eva-header',
@@ -25,19 +23,7 @@ export class HeaderComponent {
     },
   ];
 
-  constructor(private versionService: EvoVersionService,
-              private modalService: NbModalService) {
+  constructor(private versionService: EvoVersionService) {
     this.currentVersion = this.versionService.getEvoVersion();
   }
-
-  openIconsDowloadModal() {
-    this.modalService.show(
-      DownloadIconsComponent,
-      {
-        hasBackdrop: true,
-        backdropClass: 'download-icons',
-        closeOnBackdropClick: true,
-      },
-    );
-  }
 }

src/app/@theme/components/icon-list/icon-list.component.html

@@ -1,7 +1,7 @@
 <nb-card *ngFor="let icon of icons"
          (click)="clickIconHandler(icon)">
   <nb-card-body>
-    <i class="{{ icon }}"></i>
+    <i [innerHTML]="icon | eva"></i>
     <span *ngIf="isFullViewMode"
           class="icon-class">
       {{ icon }}

src/app/@theme/components/icon-list/icon-list.component.scss

@@ -1,6 +1,6 @@
 @import '../../../@theme/styles/themes';
 @import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   display: flex;
@@ -51,14 +51,14 @@
     justify-content: space-around;
 
     nb-card {
-      width: 11%;
+      width: 12%;
       border: none;
       align-items: center;
       border-radius: 0.25rem;
     }
 
     nb-card-body {
-      padding: 3rem 1.25rem;
+      padding: 3.125rem 1.25rem;
 
       i {
         font-weight: nb-theme(font-weight-bold);

src/app/@theme/components/list-view-switcher/list-view-switcher.component.scss

@@ -1,6 +1,6 @@
 @import '../../../@theme/styles/themes';
 @import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   $color-primary: nb-theme(color-primary);

src/app/@theme/components/modals/download-icon/download-icon.component.html

@@ -1,7 +1,7 @@
 <nb-card>
   <nb-card-body>
     <div class="icon-container">
-      <i class="{{ selectedIcon }}"></i>
+      <i [innerHTML]="selectedIcon | eva: 80: 80"></i>
       <div class="icon-name">{{ selectedIcon }}</div>
     </div>
     <div class="download-controls">
@@ -9,23 +9,13 @@
            (click)="selectFormatAndDownloadIcon(item.format)"
            [class.active]="item.format === selectedFormat"
       >
-        <div class="download-control svg"
-             [ngClass]="item.format">
-        </div>
-        <div class="name">{{ item.title }}</div>
+        <a href="{{ item.href }}" download>
+          <div class="download-control"
+               [ngClass]="item.format">
+          </div>
+          <div class="name">{{ item.title }}</div>
+        </a>
       </div>
     </div>
-
-    <div *ngIf="isDownloadPng" class="select-size-container">
-      <div class="title">Select a size (in pixels):</div>
-      <ul class="available-sizes">
-        <li *ngFor="let size of availablePngSizes"
-            (click)="selectPngSizeAndDownloadIcon(size)"
-            [class.active]="size === selectedPngSize"
-        >
-          {{ size }}
-        </li>
-      </ul>
-    </div>
   </nb-card-body>
 </nb-card>

src/app/@theme/components/modals/download-icon/download-icon.component.scss

@@ -1,6 +1,6 @@
 @import '../../../../@theme/styles/themes';
 @import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   $primary: nb-theme(color-primary);
@@ -24,12 +24,6 @@
     flex-direction: column;
     align-items: center;
     color: nb-theme(color-fg);
-
-    i {
-      font-size: 5rem;
-      font-weight: nb-theme(font-weight-bold);
-    }
-
   }
 
   .icon-name {
@@ -40,7 +34,7 @@
   .download-controls {
     display: flex;
     justify-content: center;
-    margin-top: 4rem;
+    margin-top: 3.5rem;
     margin-bottom: 2.5rem;
 
     > div {
@@ -60,6 +54,10 @@
           font-weight: 700;
         }
       }
+
+      a {
+        text-decoration: none;
+      }
     }
   }
 

src/app/@theme/components/modals/download-icon/download-icon.component.ts

@@ -1,82 +1,70 @@
-import { Component, Input } from '@angular/core';
-import { HttpParams } from '@angular/common/http';
-
-import { ApiService } from '../../../../@core/data/api.service';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
 
 @Component({
   selector: 'eva-download-icon',
   styleUrls: ['./download-icon.component.scss'],
   templateUrl: './download-icon.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DownloadIconComponent {
+export class DownloadIconComponent implements AfterViewInit {
 
-  @Input() selectedIcon: string;
-
-  selectedFormat: string;
-  selectedPngSize: number;
-  downloadControls: { format: string; title: string }[] = [
+  private defaultControlData = [
     {
       format: 'svg',
       title: 'SVG',
+      href: 'dist/type/svg/name.svg',
     },
     {
       format: 'png',
       title: 'PNG',
+      href: 'dist/type/png/64/name.png',
     },
     {
       format: 'sketch',
       title: 'Sketch',
+      href: 'dist/type/sketch/name.sketch', // dist/fill/png/64
     },
     {
       format: 'fig',
       title: 'FIG',
+      href: 'dist/type/fig/name.fig',
     },
   ];
-  availablePngSizes: number[] = [16, 24, 32, 64, 128, 256, 512];
-  isDownloadPng = false;
 
-  constructor(private apiService: ApiService) {
+  @Input() selectedIcon: string = '';
+  @Input() iconType: string = '';
+
+  matches = {
+    type: '',
+    name: '',
+  };
+  selectedFormat: string;
+  downloadControls: { format: string; title: string }[] = [ ];
+
+  constructor(private changeDetectorRef: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    this.matches = {
+      type: this.iconType,
+      name: this.selectedIcon,
+    };
+    this.downloadControls = this.defaultControlData.map((item) => {
+      return {
+        ...item,
+        href: this.getIconHref(item.href),
+      };
+    });
+
+    this.changeDetectorRef.detectChanges();
+  }
+
+  getIconHref(href: string): string {
+    return href.replace(/type|name/gi, (matched) => {
+      return this.matches[matched];
+    });
   }
 
   selectFormatAndDownloadIcon(iconFormat: string) {
     this.selectedFormat = iconFormat;
-    this.isDownloadPng = iconFormat === 'png';
-
-    if (this.isDownloadPng) {
-      return;
-    }
-
-    this.downloadIcon({
-      icon: this.selectedIcon,
-      format: this.selectedFormat,
-    });
-  }
-
-  selectPngSizeAndDownloadIcon(pngSize: number) {
-    this.selectedPngSize = pngSize;
-
-    this.downloadIcon({
-      icon: this.selectedIcon,
-      format: this.selectedFormat,
-      size: this.selectedPngSize,
-    });
-  }
-
-  downloadIcon(option: {
-    icon: string;
-    format: string;
-    size?: number,
-  }) {
-    const { icon, format, size } = option;
-
-    let params = new HttpParams();
-    params = params.append('icon', icon);
-    params = params.append('format', format);
-
-    if (size) {
-      params = params.append('size', size.toString());
-    }
-
-    this.apiService.download('/download/icon', {params});
   }
 }

src/app/@theme/components/modals/download-icons/download-icons.component.html

@@ -1,71 +0,0 @@
-<nb-card>
-  <nb-card-header>Download Eva Icons</nb-card-header>
-  <nb-card-body>
-    <div class="downloadable-formats">
-      <div (click)="selectIconsFormat(svg)"
-           [class.active]="selectedFormats[svg]">
-        <div class="choose-format">
-          <div class="icon svg"></div>
-          <div class="name">SVG</div>
-          <nb-checkbox [value]="selectedFormats.svg"
-                       (click)="preventEvent($event)">
-          </nb-checkbox>
-        </div>
-      </div>
-      <div (click)="selectIconsFormat(png)"
-           [class.active]="selectedFormats[png]">
-        <div class="choose-format">
-          <div class="icon png"></div>
-          <div class="name">PNG</div>
-          <nb-checkbox [value]="selectedFormats.png"
-                       (click)="preventEvent($event)">
-          </nb-checkbox>
-        </div>
-
-        <div *ngIf="isDownloadPng" class="select-size-container">
-          <div class="title">Select a size (in pixels):</div>
-          <ul class="available-sizes">
-            <li *ngFor="let size of availablePngSizes"
-                (click)="selectIconsSize($event, png, size)"
-                [class.active]="size === selectedSizes[png]"
-            >
-              {{ size }}
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div (click)="selectIconsFormat(sketch)"
-           [class.active]="selectedFormats[sketch]">
-        <div class="choose-format">
-          <div class="icon sketch"></div>
-          <div class="name">Sketch</div>
-          <nb-checkbox [value]="selectedFormats.sketch"
-                       (click)="preventEvent($event)">
-          </nb-checkbox>
-        </div>
-      </div>
-      <div (click)="selectIconsFormat(fig)"
-           [class.active]="selectedFormats[fig]">
-        <div class="choose-format">
-          <div class="icon fig"></div>
-          <div class="name">FIG</div>
-          <nb-checkbox [value]="selectedFormats.fig"
-                       (click)="preventEvent($event)">
-          </nb-checkbox>
-        </div>
-      </div>
-      <div>
-        <div class="choose-format">
-          <div class="icon npm"></div>
-          <div class="name">NPM</div>
-        </div>
-      </div>
-    </div>
-
-    <button class="btn btn-primary btn-download"
-            (click)="downloadIcons()">
-      <i class="nb-star"></i>
-      <span>Download</span>
-    </button>
-  </nb-card-body>
-</nb-card>

src/app/@theme/components/modals/download-icons/download-icons.component.scss

@@ -1,166 +0,0 @@
-@import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
-
-@include nb-install-component() {
-  $primary: nb-theme(color-primary);
-  $white: nb-theme(color-white);
-
-  nb-card {
-    width: 600px;
-    max-height: 890px;
-    background: $white;
-    border: 2px solid $primary;
-    border-radius: nb-theme(radius);
-  }
-
-  nb-card-header {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: nb-theme(color-fg);
-  }
-
-  nb-card-body {
-    padding-bottom: 2rem;
-    padding-top: 0;
-  }
-
-  .downloadable-formats {
-    > div {
-      padding: 1.5rem 0;
-      border-bottom: 1px solid nb-theme(form-control-border-color);
-      cursor: pointer;
-
-      &:hover, &.active, &:active {
-        .icon {
-          border-color: $primary;
-        }
-
-        .name {
-          font-weight: 700;
-        }
-
-        /deep/ .customised-control-indicator {
-          border-color: nb-theme(checkbox-checked-bg);
-        }
-      }
-    }
-  }
-
-  .choose-format {
-    display: flex;
-    align-items: center;
-  }
-
-  .icon {
-    width: 3.5rem;
-    height: 3.5rem;
-    border: 2px solid nb-theme(form-control-border-color);
-    border-radius: 0.75rem;
-  }
-
-  .name {
-    font-size: nb-theme(font-size-sm);
-    font-weight: nb-theme(font-weight-bold);
-    color: nb-theme(format-name-fg);
-    text-align: center;
-    margin-left: 1.5rem;
-  }
-
-  nb-checkbox {
-    margin-left: auto;
-
-    /deep/ .customised-control {
-      padding: 0.375rem 0.75rem;
-    }
-
-    /deep/ .customised-control-indicator {
-      top: 20%;
-    }
-  }
-
-  .select-size-container {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    margin-top: 1rem;
-
-    .title {
-      color: nb-theme(color-fg);
-    }
-  }
-
-  ul {
-    padding: 0;
-    margin-bottom: 0;
-  }
-
-  .available-sizes {
-    display: inline-flex;
-    margin-top: 1rem;
-    border: 1px solid $primary;
-    border-radius: nb-theme(radius);
-
-    li {
-      list-style: none;
-      color: $primary;
-      padding: 1rem 1.25rem;
-      border-left: 1px solid $primary;
-      font-weight: nb-theme(font-weight-bold);
-      cursor: pointer;
-
-      &:first-child {
-        border-left: none;
-      }
-
-      &:hover, &.active, &:active {
-        background-color: $primary;
-        color: $white;
-      }
-    }
-  }
-
-  .svg {
-    background: url('../../../../../assets/img/shape.svg') no-repeat;
-    background-position: 50% 50%;
-  }
-
-  .png {
-    background: url('../../../../../assets/img/png.svg') no-repeat;
-    background-position: 50% 50%;
-  }
-
-  .sketch {
-    background: url('../../../../../assets/img/sketch.svg') no-repeat;
-    background-position: 50% 50%;
-  }
-
-  .fig {
-    background: url('../../../../../assets/img/figma.svg') no-repeat;
-    background-position: 50% 50%;
-  }
-
-  .npm {
-    background: url('../../../../../assets/img/nmp.svg') no-repeat;
-    background-position: 50% 50%;
-  }
-
-  .btn-download {
-    display: flex;
-    align-items: center;
-    color: nb-theme(color-white);
-    font-size: nb-theme(font-size-xs);
-    margin-top: 3.5rem;
-    padding: 0.75rem 1rem;
-    border-radius: 0.25rem;
-    cursor: pointer;
-
-    i {
-      font-size: 1rem;
-    }
-
-    span {
-      margin-left: 1.25rem;
-    }
-  }
-}

src/app/@theme/components/modals/download-icons/download-icons.component.ts

@@ -1,82 +0,0 @@
-import { Component } from '@angular/core';
-// todo: uncomment when api will be implemented
-import { NbModalRef } from '@nebular/theme';
-
-import { ApiService } from '../../../../@core/data/api.service';
-
-class IconsFormat {
-  png?: boolean;
-  svg?: boolean;
-  sketch?: boolean;
-  fig?: boolean;
-}
-
-class IconsSize {
-  png?: number | string;
-}
-
-// todo: uncomment when api will be implemented
-/*class Icon {
-  id: string;
-  size?: number | string | null;
-}*/
-
-@Component({
-  selector: 'eva-download-icons',
-  styleUrls: ['./download-icons.component.scss'],
-  templateUrl: './download-icons.component.html',
-})
-export class DownloadIconsComponent {
-
-  readonly png = 'png';
-  readonly svg = 'svg';
-  readonly sketch = 'sketch';
-  readonly fig = 'fig';
-
-  private defaultIconsSizes = {
-    png: '64',
-  };
-
-  constructor(protected modalRef: NbModalRef<DownloadIconsComponent>,
-              private apiService: ApiService) {
-
-  }
-
-  selectedSizes: IconsSize = {
-    png: this.defaultIconsSizes[this.png],
-  };
-  selectedFormats: IconsFormat = {
-    png: false,
-    svg: false,
-    sketch: false,
-    fig: false,
-  };
-  availablePngSizes: string[] = ['16', '24', '32', '64', '128', '256', '512', 'All'];
-  isDownloadPng = false;
-
-  selectIconsFormat(iconsFormat: string) {
-    this.selectedFormats[iconsFormat] = !this.selectedFormats[iconsFormat];
-    this.isDownloadPng = this.selectedFormats[this.png];
-
-    if (this.selectedSizes[iconsFormat] && !this.selectedFormats[iconsFormat]) {
-      this.selectedSizes[iconsFormat] = this.defaultIconsSizes[iconsFormat];
-    }
-  }
-
-  selectIconsSize(event, iconsFormat: string, size: number | string) {
-    event.stopPropagation();
-
-    this.selectedSizes[iconsFormat] = size;
-  }
-
-  preventEvent(event) {
-    event.preventDefault();
-  }
-
-  downloadIcons() {
-    this.modalRef.hide();
-
-    // todo: add download icons options
-    this.apiService.download('/download/icons');
-  }
-}

src/app/@theme/components/page-container/page-container.component.html

@@ -1,7 +1,7 @@
 <h1>Eva icons</h1>
 
 <div class="search">
-  <i class="nb-search"></i>
+  <i [innerHTML]="'search-outline' | eva : 35: 35: '#3366ff'"></i>
   <input class="search-input"
          #searchInput
          autocomplete="off"

src/app/@theme/components/page-container/page-container.component.scss

@@ -1,6 +1,6 @@
-@import '../../@theme/styles/themes';
+@import '../../styles/themes';
 @import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   $primary: nb-theme(color-primary);
@@ -37,10 +37,12 @@
     i {
       color: $primary;
       position: absolute;
-      font-size: 2.5rem;
-      font-weight: nb-theme(font-weight-bold);
       right: $search-input-padding-sides;
       top: calc(#{$search-input-padding-tops} - 0.25rem);
+
+      .eva-search-outline {
+        fill: $primary;
+      }
     }
   }
 

src/app/@theme/components/page-container/page-container.component.ts

@@ -0,0 +1,104 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Input,
+  OnDestroy,
+  ViewChild,
+} from '@angular/core';
+import { NbDialogService } from '@nebular/theme';
+import { ActivatedRoute, Router } from '@angular/router';
+import { fromEvent } from 'rxjs/internal/observable/fromEvent';
+
+import { IconService } from '../../../@core/data/icon.service';
+import { debounceTime, delay, map, mergeMap, takeWhile, tap } from 'rxjs/operators';
+import { DownloadIconComponent } from '../modals/download-icon/download-icon.component';
+
+@Component({
+  selector: 'eva-page-container',
+  templateUrl: 'page-container.component.html',
+  styleUrls: ['page-container.component.scss'],
+})
+export class PageContainerComponent implements AfterViewInit, OnDestroy {
+
+  private alive = true;
+
+  @Input() iconsType: string;
+
+  icons: string[] = [];
+  view: string = 'full';
+
+  @ViewChild('searchInput') searchInput: ElementRef;
+
+  constructor(private iconService: IconService,
+              private router: Router,
+              private activatedRoute: ActivatedRoute,
+              private dialogService: NbDialogService) {
+  }
+
+  ngAfterViewInit() {
+    this.activatedRoute.queryParams
+      .pipe(
+        takeWhile(() => this.alive),
+        delay(0),
+        map(params => params.searchKey),
+        tap((searchKeyValue: string) => {
+          const inputValue = this.searchInput.nativeElement.value;
+
+          if (!inputValue && searchKeyValue) {
+            this.searchInput.nativeElement.value = searchKeyValue;
+          }
+        }),
+        mergeMap((searchKeyValue: string) => {
+          return searchKeyValue ?
+            this.iconService.getFilteredIconsData(searchKeyValue, this.iconsType) :
+            this.iconService.getIconsData(this.iconsType);
+        }),
+      )
+      .subscribe((iconsData: string[]) => {
+        this.icons = iconsData;
+      });
+
+    fromEvent(this.searchInput.nativeElement, 'keyup')
+      .pipe(
+        takeWhile(() => this.alive),
+        debounceTime(500),
+      )
+      .subscribe((event: any) => {
+        const searchKeyValue = event.target.value;
+
+        if (searchKeyValue) {
+          this.router.navigate(
+            [this.iconsType],
+            { queryParams: { searchKey: searchKeyValue }});
+        } else {
+          const url = this.router.url.substring(0, this.router.url.indexOf('?'));
+
+          this.router.navigateByUrl(url);
+        }
+      });
+  }
+
+  changeView(viewMode) {
+    this.view = viewMode;
+  }
+
+  clickIcon(icon) {
+    const modalRef = this.dialogService.open(
+      DownloadIconComponent,
+      {
+        hasBackdrop: true,
+        backdropClass: 'download-icon',
+        closeOnBackdropClick: true,
+      },
+    );
+    const componentInstance = modalRef.componentRef.instance;
+
+    componentInstance.selectedIcon = icon;
+    componentInstance.iconType = this.iconsType;
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+}

src/app/@theme/styles/themes.scss

@@ -30,6 +30,8 @@ $nb-themes: nb-register-theme((
   header-height: 4.25rem,
   header-fg: color-fg,
 
+  header-button-border: #dce4f2,
+
   menu-bg: transparent,
   menu-item-padding: 0.675rem 1rem,
   menu-item-fg: #d8e1f0,
@@ -55,5 +57,7 @@ $nb-themes: nb-register-theme((
   checkbox-checked-border-color: checkbox-checked-bg,
   checkbox-checked-checkmark: color-white,
 
-  format-name-fg: #6a7385
+  format-name-fg: #6a7385,
+
+
 ), eva, corporate);

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

@@ -2,11 +2,15 @@ import { RouterModule } from '@angular/router';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { CoreModule } from '../@core/core.module';
+
 // components
 import { FooterComponent } from './components/footer/footer.component';
 import { HeaderComponent } from './components/header/header.component';
 import { DownloadIconComponent } from './components/modals/download-icon/download-icon.component';
-import { DownloadIconsComponent } from './components/modals/download-icons/download-icons.component';
+import { PageContainerComponent } from './components/page-container/page-container.component';
+import { ListViewSwitcherComponent } from './components/list-view-switcher/list-view-switcher.component';
+import { IconListComponent } from './components/icon-list/icon-list.component';
 // components
 
 // services
@@ -19,7 +23,7 @@ import {
   NbCardModule,
   NbThemeModule,
   NbOverlayModule,
-  NbModalModule,
+  NbDialogModule,
   NbCheckboxModule,
 } from '@nebular/theme';
 
@@ -31,14 +35,17 @@ import {
     NbLayoutModule,
     NbCardModule,
     NbOverlayModule,
-    NbModalModule,
+    NbDialogModule,
     NbCheckboxModule,
+    CoreModule,
   ],
   declarations: [
     FooterComponent,
     HeaderComponent,
     DownloadIconComponent,
-    DownloadIconsComponent,
+    PageContainerComponent,
+    ListViewSwitcherComponent,
+    IconListComponent,
   ],
   exports: [
     RouterModule,
@@ -46,16 +53,18 @@ import {
     NbMenuModule,
     NbLayoutModule,
     NbCardModule,
-    NbModalModule,
+    NbDialogModule,
     NbOverlayModule,
     NbCheckboxModule,
 
     FooterComponent,
     HeaderComponent,
+    PageContainerComponent,
+    ListViewSwitcherComponent,
+    IconListComponent,
   ],
   entryComponents: [
     DownloadIconComponent,
-    DownloadIconsComponent,
   ],
 })
 export class EvaThemeModule {
@@ -67,6 +76,7 @@ export class EvaThemeModule {
         ...evaServices,
         ...NbMenuModule.forRoot().providers,
         ...NbOverlayModule.forRoot().providers,
+        ...NbDialogModule.forRoot().providers,
       ],
     };
   }

src/app/pages/fill/fill.component.html

@@ -1,3 +0,0 @@
-<p>
-  fill works!
-</p>

src/app/pages/fill/fill.component.ts

@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'eva-fill',
-  templateUrl: './fill.component.html',
-  styleUrls: ['./fill.component.css'],
+  template: `
+    <eva-page-container [iconsType]="type"></eva-page-container>
+  `,
 })
-export class FillComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
+export class FillComponent {
 
+  type: string = 'fill';
 }

src/app/pages/outline/outline.component.ts

@@ -1,95 +1,12 @@
-import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
-import { ActivatedRoute, Router} from '@angular/router';
-import { fromEvent } from 'rxjs';
-import { debounceTime, delay, map, mergeMap, takeWhile, tap } from 'rxjs/operators';
-import { NbModalService } from '@nebular/theme';
-
-import { IconService } from '../../@core/data/icon.service';
-
-import { DownloadIconComponent } from '../../@theme/components/modals/download-icon/download-icon.component';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'eva-outline',
-  templateUrl: './outline.component.html',
-  styleUrls: ['./outline.component.scss'],
+  template: `
+    <eva-page-container [iconsType]="type"></eva-page-container>
+  `,
 })
-export class OutlineComponent implements AfterViewInit, OnDestroy {
+export class OutlineComponent {
 
-  private alive = true;
-
-  icons: string[] = [];
-  view: string = 'full';
-
-  @ViewChild('searchInput') searchInput: ElementRef;
-
-  constructor(private iconService: IconService,
-              private router: Router,
-              private activatedRoute: ActivatedRoute,
-              private modalService: NbModalService) {
-  }
-
-  ngAfterViewInit() {
-    this.activatedRoute.queryParams
-      .pipe(
-        takeWhile(() => this.alive),
-        delay(0),
-        map(params => params.searchKey),
-        tap((searchKeyValue: string) => {
-          const inputValue = this.searchInput.nativeElement.value;
-
-          if (!inputValue && searchKeyValue) {
-            this.searchInput.nativeElement.value = searchKeyValue;
-          }
-        }),
-        mergeMap((searchKeyValue: string) => {
-          return searchKeyValue ?
-            this.iconService.getFilteredIconsData(searchKeyValue) :
-            this.iconService.getIconsData();
-        }),
-      )
-      .subscribe((iconsData: string[]) => {
-        this.icons = iconsData;
-      });
-
-    fromEvent(this.searchInput.nativeElement, 'keyup')
-      .pipe(
-        takeWhile(() => this.alive),
-        debounceTime(500),
-      )
-      .subscribe((event: any) => {
-        const searchKeyValue = event.target.value;
-
-        if (searchKeyValue) {
-          this.router.navigate(
-            ['/outline'],
-            { queryParams: { searchKey: searchKeyValue }});
-        } else {
-          const url = this.router.url.substring(0, this.router.url.indexOf('?'));
-
-          this.router.navigateByUrl(url);
-        }
-      });
-  }
-
-  changeView(viewMode) {
-    this.view = viewMode;
-  }
-
-  clickIcon(icon) {
-    const modalRef = this.modalService.show(
-      DownloadIconComponent,
-      {
-        hasBackdrop: true,
-        backdropClass: 'download-icon',
-        closeOnBackdropClick: true,
-      },
-    );
-    const componentInstance = modalRef.componentInstance;
-
-    componentInstance.selectedIcon = icon;
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
+  type: string = 'outline';
 }

src/app/pages/pages.module.ts

@@ -1,22 +1,20 @@
 import { NgModule } from '@angular/core';
 
 import { EvaThemeModule } from '../@theme/theme.module';
+import { CoreModule } from '../@core/core.module';
 
 import { OutlineComponent } from './outline/outline.component';
 import { FillComponent } from './fill/fill.component';
-import { IconListComponent } from './outline/icon-list/icon-list.component';
-import { ListViewSwitcherComponent } from './outline/list-view-switcher/list-view-switcher.component';
 
 
 @NgModule({
   imports: [
+    CoreModule,
     EvaThemeModule,
   ],
   declarations: [
     OutlineComponent,
     FillComponent,
-    IconListComponent,
-    ListViewSwitcherComponent,
   ],
 })
 export class PagesModule {