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.

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`

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": [

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;
  }
  }
 

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>

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: '';

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;

docs/app/@theme/components/search/search.component.scss

@@ -18,7 +18,7 @@
  }
  }
 
- .icon {
+ nb-icon {
  color: $fg;
  position: absolute;
  top: 50%;

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,

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();
 

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,

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>

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%);
  }

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;
  }

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>

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>
 

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 {

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>

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 {

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;

docs/app/example/example-404.component.scss

@@ -1,4 +1,4 @@
-::ng-deep nb-layout-column {
+:host {
  align-items: center;
  display: flex;
  color: gray;

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'],
 })