feat(icons): new nb-icon component, icons library, and @nebular/eva…

…-icons package (#1319) BREAKING CHANGE: Starting from version 4.0, Nebular introduces new `nb-icon` component and `NbIconLibraries` service to host SVG and Font icon packs. As a breaking change, Nebular moves from `nebular-icons` package to much more popular [Eva Icons pack](https://akveo.github.io/eva-icons/) consisting of 480+ beautiful SVG icons. We believe this will bring more quality and variety to interfaces based on Nebular. Now all Nebular components internally use `<nb-icon></nb-icon>` component utilizing Eva Icons SVG icons. More details on [nb-icon](https://akveo.github.io/nebular/docs/components/icon) component. There are two ways to upgrade: **Migrate to Eva Icons** (recommended): 1) install Eva Icons Nebular package `npm i @nebular/eva-icons` 2) register `NbEvaIconsModule` in the `app.module.ts` ``` import { NbEvaIconsModule } form '@nebular/eva-icons'; @NgModule({ imports: [ // ... NbEvaIconsModule, ], }) ``` 3) Search for all usages of `<span icon="nb-*"` or ``<i icon="nb-*"``and replace with `<nb-icon icon="icon-name"></nb-icon>`. Full icons list https://akveo.github.io/eva-icons/. 4) Search for `icon: 'nb-*'` references in properties for such components as Menu, Actions, Tabs, etc. Replace those with `icon: 'icon-name'`. Please note, there is no need to specify any icon prefix (such as `eva-` or `nb-`) since prefix is specified when the icon package is registered in Nebular. 4) Update styles if necessary. 5) if you have `nebular-icons` installed, remove the package and all references. **Continue using nebular-icons** This option is also possible, but please note, Nebular Component will still use Eva Icons pack for internal component icons, such as `close`, `arrow-down`, `arrow-up`, etc. 1) Register nebular-icons as a pack for Nebular in your `app.component.ts` ``` import { NbIconLibraries } from '@nebular/theme'; constructor(private iconLibraries: NbIconLibraries) { this.iconLibraries.registerFontPack('nebular', { iconClassPrefix: 'nb' }); this.iconLibraries.setDefaultPack('nebular'); } ``` 3) Search for all usages of `<span icon="nb-*"` or ``<i icon="nb-*"`` and replace with `<nb-icon icon="icon-name"></nb-icon>` without the `nb-` prefix since prefix is specified when the icon package is registered in Nebular. 4) Search for `icon: 'nb-*'` references in properties for such components as Menu, Actions, Tabs, etc. Replace those with `icon: 'icon-name'` without `nb-` prefix since it is unnecessary and covered under the hood. Please open an issue if you have any questions or having difficulties to migrate.
akveo · Apr 1, 2019 · 435a6ac · 435a6ac
1 parent 3af578c
commit 435a6ac
Show file tree

Hide file tree

Showing 146 changed files with 1,761 additions and 1,149 deletions.
diff --git a/DEV_DOCS.md b/DEV_DOCS.md
@@ -334,6 +334,8 @@ To give the user capability switch between live and inline representation of the
 
 # Release
 
+0. For major version, search for `@breaking-change` to make sure all breaking changes are covered.
+
 To start a new release (publish the framework packages on NPM) you need:
 
 1. create a new release branch called `release:v1.0.2`

diff --git a/angular.json b/angular.json
@@ -26,7 +26,6 @@
               "src/favicon.ico"
             ],
             "styles": [
-              "node_modules/nebular-icons/scss/nebular-icons.scss",
               "src/styles.scss"
             ],
             "scripts": []
@@ -77,7 +76,6 @@
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
-              "node_modules/nebular-icons/scss/nebular-icons.scss",
               "src/styles.scss"
             ],
             "assets": [
@@ -147,7 +145,6 @@
               "src/favicon.ico"
             ],
             "styles": [
-              "node_modules/nebular-icons/scss/nebular-icons.scss",
               "src/styles.scss"
             ],
             "scripts": []
@@ -198,7 +195,6 @@
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
-              "node_modules/nebular-icons/scss/nebular-icons.scss",
               "src/styles.scss"
             ],
             "assets": [
@@ -266,7 +262,6 @@
               "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/docsearch.js/dist/cdn/docsearch.min.css",
               "node_modules/highlight.js/styles/dracula.css",
-              "node_modules/nebular-icons/scss/nebular-icons.scss",
               "docs/app/@theme/styles/styles.scss"
             ],
             "scripts": [
@@ -321,7 +316,6 @@
             ],
             "styles": [
               "node_modules/highlight.js/styles/dracula.css",
-              "node_modules/nebular-icons/scss/nebular-icons.scss",
               "docs/app/@theme/styles/styles.scss"
             ],
             "assets": [

diff --git a/docs/app/@theme/components/header/header.component.scss b/docs/app/@theme/components/header/header.component.scss
@@ -22,8 +22,10 @@
     flex: 1 0 auto;
     padding: 0 0.5rem;
 
-    .nb-menu {
+    nb-icon {
       vertical-align: middle;
+      font-size: 1.75rem;
+      color: $version-fg;
     }
   }
 

diff --git a/docs/app/@theme/components/header/header.component.ts b/docs/app/@theme/components/header/header.component.ts
@@ -8,7 +8,7 @@ import { NgdVersionService } from '../../services';
   template: `
     <div class="section left">
       <button *ngIf="sidebarTag" class="sidebar-toggle" (click)="toggleSidebar()">
-        <i class="nb-menu"></i>
+        <nb-icon icon="menu-2"></nb-icon>
       </button>
       <div class="logo">
         <a routerLink="/">Nebular</a>

diff --git a/docs/app/@theme/components/page-tabs/page-tabs.component.scss b/docs/app/@theme/components/page-tabs/page-tabs.component.scss
@@ -28,9 +28,15 @@
       font-weight: 500;
     }
 
-    .icon {
-      font-size: 1.5rem;
-      padding-bottom: 1rem;
+    .text-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    ::ng-deep nb-icon {
+      font-size: 1.875rem;
+      margin-bottom: 1rem;
     }
 
     &.selected {
@@ -46,12 +52,6 @@
       }
     }
   }
-
-  .icon,
-  .title {
-    display: block;
-    text-align: center;
-  }
 }
 
 :host(.horizontal) {
@@ -62,19 +62,15 @@
     padding: 0 1rem;
 
     .title,
-    .icon {
-      display: inline;
-      padding-bottom: 0;
-      vertical-align: middle;
-    }
-
-    .icon {
+    ::ng-deep nb-icon {
+      margin-bottom: 1rem;
       margin-right: 0.5rem;
     }
   }
 
   .text-container {
-    padding-bottom: 1.3rem;
+    flex-direction: row;
+    padding-bottom: 0;
   }
 
   .line {
@@ -87,6 +83,7 @@
 
     a {
       flex: 1 1 0;
+      margin-bottom: 0;
 
       &.selected::after {
         content: '';

diff --git a/docs/app/@theme/components/page-tabs/page-tabs.component.ts b/docs/app/@theme/components/page-tabs/page-tabs.component.ts
@@ -15,7 +15,7 @@ import { Observable, of as observableOf, combineLatest } from 'rxjs';
   template: `
     <a *ngFor="let item of items$ | async" [class.selected]="item.selected" [routerLink]="['../', item.tab]">
       <div class="text-container">
-        <i class="icon {{ item.icon }}"></i>
+        <nb-icon [icon]="item.icon"></nb-icon>
         <span class="title">{{ item.title }}</span>
       </div>
       <i class="line"></i>
@@ -57,23 +57,23 @@ export class NgdPageTabsComponent implements OnDestroy {
       {
         tab: 'overview',
         title: 'Overview',
-        icon: 'feather-eye',
+        icon: 'eye-outline',
         selected: true,
       },
       {
         tab: 'api',
         title: 'API',
-        icon: 'feather-settings',
+        icon: 'settings-outline',
       },
       {
         tab: 'theme',
         title: 'Theme',
-        icon: 'feather-droplet',
+        icon: 'droplet-outline',
       },
       {
         tab: 'examples',
         title: 'Examples',
-        icon: 'feather-image',
+        icon: 'image-outline',
       },
     ];
   private alive = true;

diff --git a/docs/app/@theme/components/search/search.component.scss b/docs/app/@theme/components/search/search.component.scss
@@ -18,7 +18,7 @@
     }
   }
 
-  .icon {
+  nb-icon {
     color: $fg;
     position: absolute;
     top: 50%;

diff --git a/docs/app/@theme/components/search/search.component.ts b/docs/app/@theme/components/search/search.component.ts
@@ -5,7 +5,7 @@ import { NB_WINDOW } from '@nebular/theme';
   selector: 'ngd-search',
   styleUrls: ['./search.component.scss'],
   template: `
-    <i class="icon feather-search"></i>
+    <nb-icon icon="search-outline"></nb-icon>
     <input type="text" id="doc-search" placeholder="Start typing...">
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/docs/app/@theme/styles/styles.scss b/docs/app/@theme/styles/styles.scss
@@ -1,7 +1,6 @@
 @import 'themes';
 @import 'common';
 @import 'small-social';
-@import 'feather';
 
 @import '../../../../src/framework/theme/styles/global/normalize';
 @import '../../../../src/framework/theme/styles/global/components';
@@ -16,6 +15,7 @@
   @include nb-actions-theme();
   @include nb-search-theme();
   @include nb-bootstrap-global();
+  @include nb-icon-theme();
 
   @include nb-typography();
 

diff --git a/docs/app/@theme/theme.module.ts b/docs/app/@theme/theme.module.ts
@@ -16,8 +16,11 @@ import {
   NbSidebarModule,
   NbCardModule,
   NbCheckboxModule,
+  NbIconModule,
 } from '@nebular/theme';
 
+import { NbEvaIconsModule } from '@nebular/eva-icons';
+
 import {
   NgdHeaderComponent,
   NgdHeroComponent,
@@ -57,6 +60,8 @@ import {
     NbCardModule,
     NbMenuModule,
     NbTabsetModule,
+    NbIconModule,
+    NbEvaIconsModule,
     RouterModule,
   ],
   declarations: [
@@ -77,6 +82,7 @@ import {
     RouterModule,
     ReactiveFormsModule,
     FormsModule,
+    NbIconModule,
     NbLayoutModule,
     NbSidebarModule,
     NbCardModule,

diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.html b/docs/app/blocks/components/live-example-block/live-example-block.component.html
@@ -6,20 +6,20 @@
       <select class="action-item" [(ngModel)]="currentTheme"  (change)="switchTheme($event.target.value)">
         <option *ngFor="let theme of themes" [value]="theme.value">{{theme.label}}</option>
       </select>
-      <i class="icon feather-aperture"></i>
+      <nb-icon icon="color-palette-outline"></nb-icon>
     </div>
     <a class="btn action-item action-button" target="_blank" [href]="url">
-      <i class="icon feather-external-link"></i>
+      <nb-icon icon="external-link-outline"></nb-icon>
     </a>
     <button type="button"
             *ngIf="hasViewSwitch"
             class="btn action-item action-button"
             (click)="switchToInlineVew()">
-      <i class="icon feather-code"></i>
+      <nb-icon icon="code-outline"></nb-icon>
     </button>
   </div>
 </section>
 <div class="iframe-container">
   <iframe #iframe *ngIf="content.id" [style.height.px]="iframeHeight" [class.loading]="loading"></iframe>
 </div>
-<span class="icon-loading feather-more-vertical" *ngIf="loading"></span>
+<nb-icon class="icon-loading" icon="more-vertical-outline" *ngIf="loading"></nb-icon>
diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.scss b/docs/app/blocks/components/live-example-block/live-example-block.component.scss
@@ -40,7 +40,7 @@
     display: flex;
     width: 100%;
 
-    .icon {
+    nb-icon {
       font-size: 0.95rem;
     }
   }
@@ -73,7 +73,7 @@
       color: transparent;
     }
 
-    .icon {
+    nb-icon {
       color: $action-fg;
       position: absolute;
       top: 50%;
@@ -156,7 +156,7 @@
         padding: 0 2.5rem;
       }
 
-      .icon {
+      nb-icon {
         left: 1.25rem;
         transform: translate(0, -50%);
       }

diff --git a/docs/app/blocks/components/pager-block/pager-block.component.scss b/docs/app/blocks/components/pager-block/pager-block.component.scss
@@ -32,7 +32,7 @@
       font-weight: 500;
       font-size: 1.2rem;
 
-      i {
+      nb-icon {
         color: $arrow-fg;
         margin-top: 0.3rem;
       }

diff --git a/docs/app/blocks/components/pager-block/pager-block.component.ts b/docs/app/blocks/components/pager-block/pager-block.component.ts
@@ -11,7 +11,7 @@ import { NgdPaginationService } from '../../../@theme/services';
         <a *ngIf="paginationItem.prev" [routerLink]="paginationItem.prev.link"
           [attr.title]="paginationItem.prev.title">
           <div class="page-title">
-            <i class="icon feather-arrow-left"></i>
+            <nb-icon icon="arrow-back-outline"></nb-icon>
             <span>{{ paginationItem.prev.title }}</span>
           </div>
           <div class="description">Previous page</div>
@@ -23,7 +23,7 @@ import { NgdPaginationService } from '../../../@theme/services';
           [attr.title]="paginationItem.next.title">
           <div class="page-title">
             <span>{{ paginationItem.next.title }}</span>
-            <i class="icon feather-arrow-right"></i>
+            <nb-icon icon="arrow-forward-outline"></nb-icon>
           </div>
           <div class="description">Next page</div>
         </a>

diff --git a/docs/app/blocks/components/tabbed-example-block/tabbed-example-block.component.html b/docs/app/blocks/components/tabbed-example-block/tabbed-example-block.component.html
@@ -2,7 +2,7 @@
         *ngIf="hasViewSwitch"
         class="btn action-item action-button"
         (click)="switchToLiveView()">
-  <i class="icon feather-image"></i>
+  <nb-icon icon="image-outline"></nb-icon>
   <span class="text">Live view</span>
 </button>
 

diff --git a/docs/app/blocks/components/tabbed-example-block/tabbed-example-block.component.scss b/docs/app/blocks/components/tabbed-example-block/tabbed-example-block.component.scss
@@ -22,8 +22,9 @@
     font-weight: normal;
     font-size: 0.9rem;
 
-    .icon {
-      font-size: 0.95rem;
+    nb-icon {
+      font-size: 1rem;
+      vertical-align: middle;
     }
 
     &:focus, &:active, &:hover {

diff --git a/docs/app/blocks/components/theme-block/theme-block.component.html b/docs/app/blocks/components/theme-block/theme-block.component.html
@@ -31,7 +31,7 @@ <h2>{{ vm.themeTitle }} Theme</h2>
             <a [routerLink]="['/docs/themes', parent.theme]" fragment="{{ parent.prop }}"
               [class.inheritance-property]="index > 0"
               *ngFor="let parent of prop.parents; let index = index">
-              <i *ngIf="index > 0" class="inheritance-icon feather-arrow-left"></i>
+              <nb-icon *ngIf="index > 0" class="inheritance-icon" icon="arrow-back-outline"></nb-icon>
               <span>{{ parent.prop }}</span>
               <span *ngIf="parent.theme !== vm.themeName" class="parent-theme-name">({{ parent.theme }})</span>
             </a>

diff --git a/docs/app/blocks/components/theme-block/theme-block.component.scss b/docs/app/blocks/components/theme-block/theme-block.component.scss
@@ -9,7 +9,9 @@
   $selected-row-bg: nb-theme(color-gray-light);
 
   .inheritance-icon {
+    font-size: 1rem;
     margin: 0 0.25rem;
+    vertical-align: middle;
   }
 
   .inheritance-property {

diff --git a/docs/app/documentation/documentation.component.scss b/docs/app/documentation/documentation.component.scss
@@ -76,6 +76,10 @@
       }
     }
 
+    nb-icon {
+      display: none;
+    }
+
     .menu-items .menu-item .menu-item a {
       &:hover, &.active, &:focus {
         text-shadow: 0.5px 0 0 currentColor;

diff --git a/docs/app/example/example-404.component.scss b/docs/app/example/example-404.component.scss
@@ -1,4 +1,4 @@
-::ng-deep nb-layout-column {
+:host {
   align-items: center;
   display: flex;
   color: gray;

diff --git a/docs/app/example/example-404.component.ts b/docs/app/example/example-404.component.ts
@@ -4,9 +4,7 @@ import { NbThemeService } from '@nebular/theme';
 @Component({
   selector: 'ngd-example-404',
   template: `
-    <nb-layout>
-      <nb-layout-column>Example not found.</nb-layout-column>
-    </nb-layout>
+    Example not found.
   `,
   styleUrls: ['./example-404.component.scss'],
 })