Icons Library, Eva icons

[nnixaa]

TODO

• Breaking changes doc with migration steps
• add icon to docs components list
• update ng add @nebular/theme schematic
• remove nebular icons from docs
• deprecate nebular-icons package
• create issue to add to Packages smoke
• create issue with additional icons features (@nebular/eva-icons enhancements #1321)
• create issue to refactor how we pass the icon (so that we can pass it as <nb-icon> and not as a property). In places where we still need property - we should also pass icon pack. (Actions, Tabs, Menu and similar components should accept icon as template, not property #1322) (Components that accepts icon as a property should also accept pack. #1323)
• create issue to be able to provide custom essential pack(@nebular/eva-icons enhancements #1321)

BREAKING CHANGE:

Starting from 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 consisting of 480+ beautiful SVG icons. We believe this will bring more quality and variety for interfaces development.

Now all Nebular components internally use <nb-icon></nb-icon> component utilizing Eva Icons SVG icons. More details on nb-icon component.

There are two ways to upgrade:
Migrate to Eva Icons:

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 this is already covered under the hood.

5. Update styles if necessary.

6. 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 it is unnecessary and covered under the hood.

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.

[yggg]

Also icon.svg is missing