feat(module:icon): switch to SVG icons (#2171)

NG-ZORRO · Oct 8, 2018 · 7bdb79b · 7bdb79b
1 parent e11247c
commit 7bdb79b
Show file tree

Hide file tree

Showing 243 changed files with 2,250 additions and 1,177 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -2,7 +2,7 @@ sudo: required
 dist: trusty
 language: node_js
 node_js:
-  - '8.10'
+  - '10.9.0'
 
 env:
   - TASK=pre-release

diff --git a/angular.json b/angular.json
@@ -19,7 +19,12 @@
             "assets": [
               "site/src/assets",
               "site/src/favicon.ico",
-              "site/src/404.html"
+              "site/src/404.html",
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@ant-design/icons/inline-svg/",
+                "output": "/assets/"
+              }
             ],
             "styles": [
               "site/src/styles.less"
@@ -54,8 +59,8 @@
             "browserTarget": "ng-zorro-antd-doc:build"
           },
           "configurations": {
-            "prod": {
-              "browserTarget": "ng-zorro-antd-doc:build:prod"
+            "production": {
+              "browserTarget": "ng-zorro-antd-doc:build:production"
             }
           }
         },

diff --git a/components/alert/nz-alert.component.html b/components/alert/nz-alert.component.html
@@ -2,28 +2,27 @@
   <ng-container *ngIf="nzShowIcon">
     <i class="ant-alert-icon" [ngClass]="nzIconType" *ngIf="nzIconType; else iconTemplate"></i>
     <ng-template #iconTemplate>
-      <i class="ant-alert-icon anticon" [ngClass]="iconClassMap">
-      </i>
+      <i nz-icon type="alert" class="ant-alert-icon anticon" [ngClass]="iconClassMap"></i>
     </ng-template>
   </ng-container>
   <span class="ant-alert-message" *ngIf="nzMessage">
-        <ng-container *ngIf="isMessageString; else messageTemplate">{{ nzMessage }}</ng-container>
-        <ng-template #messageTemplate>
-          <ng-template [ngTemplateOutlet]="nzMessage"></ng-template>
-        </ng-template>
-      </span>
+    <ng-container *ngIf="isMessageString; else messageTemplate">{{ nzMessage }}</ng-container>
+    <ng-template #messageTemplate>
+      <ng-template [ngTemplateOutlet]="nzMessage"></ng-template>
+    </ng-template>
+  </span>
   <span class="ant-alert-description" *ngIf="nzDescription">
-        <ng-container *ngIf="isDescriptionString; else descriptionTemplate">{{ nzDescription }}</ng-container>
-        <ng-template #descriptionTemplate>
-          <ng-template [ngTemplateOutlet]="nzDescription"></ng-template>
-        </ng-template>
-      </span>
+    <ng-container *ngIf="isDescriptionString; else descriptionTemplate">{{ nzDescription }}</ng-container>
+    <ng-template #descriptionTemplate>
+      <ng-template [ngTemplateOutlet]="nzDescription"></ng-template>
+    </ng-template>
+  </span>
   <a
     *ngIf="nzCloseable || nzCloseText"
     (click)="closeAlert()"
     class="ant-alert-close-icon">
     <ng-template #closeDefaultTemplate>
-      <i class="anticon anticon-cross"></i>
+      <i nz-icon type="close" class="anticon-close"></i>
     </ng-template>
     <ng-container *ngIf="nzCloseText; else closeDefaultTemplate">
       <ng-container *ngIf="isCloseTextString; else closeTextTemplate">{{ nzCloseText }}</ng-container>

diff --git a/components/alert/nz-alert.component.ts b/components/alert/nz-alert.component.ts
@@ -19,7 +19,7 @@ import { toBoolean } from '../core/util/convert';
   preserveWhitespaces: false,
   templateUrl        : './nz-alert.component.html',
   styles             : [
-    `:host {
+      `:host {
       display: block;
     }`
   ]
@@ -146,14 +146,14 @@ export class NzAlertComponent implements OnInit {
 
   updateIconClassMap(): void {
     this.iconClassMap = {
-      'anticon-cross-circle-o'      : this.nzDescription && this.nzType === 'error',
-      'anticon-check-circle-o'      : this.nzDescription && this.nzType === 'success',
-      'anticon-info-circle-o'       : this.nzDescription && this.nzType === 'info',
-      'anticon-exclamation-circle-o': this.nzDescription && this.nzType === 'warning',
-      'anticon-cross-circle'        : (!this.nzDescription) && this.nzType === 'error',
-      'anticon-check-circle'        : (!this.nzDescription) && this.nzType === 'success',
-      'anticon-info-circle'         : (!this.nzDescription) && this.nzType === 'info',
-      'anticon-exclamation-circle'  : (!this.nzDescription) && this.nzType === 'warning'
+      'anticon-close-circle-o'         : this.nzDescription && this.nzType === 'error',
+      'anticon-check-circle-o'         : this.nzDescription && this.nzType === 'success',
+      'anticon-info-circle-o'          : this.nzDescription && this.nzType === 'info',
+      'anticon-exclamation-circle-o'   : this.nzDescription && this.nzType === 'warning',
+      'anticon-close-circle-fill'      : (!this.nzDescription) && this.nzType === 'error',
+      'anticon-check-circle-fill'      : (!this.nzDescription) && this.nzType === 'success',
+      'anticon-info-circle-fill'       : (!this.nzDescription) && this.nzType === 'info',
+      'anticon-exclamation-circle-fill': (!this.nzDescription) && this.nzType === 'warning'
     };
   }
 

diff --git a/components/alert/nz-alert.module.ts b/components/alert/nz-alert.module.ts
@@ -1,12 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { NzIconModule } from '../icon/nz-icon.module';
 
 import { NzAlertComponent } from './nz-alert.component';
 
 @NgModule({
   declarations: [ NzAlertComponent ],
   exports     : [ NzAlertComponent ],
-  imports     : [ CommonModule ]
+  imports     : [ CommonModule, NzIconModule ]
 })
 export class NzAlertModule {
 }
diff --git a/components/alert/nz-alert.spec.ts b/components/alert/nz-alert.spec.ts
@@ -43,7 +43,7 @@ describe('alert', () => {
       testComponent.closeable = true;
       fixture.detectChanges();
       expect(testComponent.onClose).toHaveBeenCalledTimes(0);
-      expect(alert.nativeElement.querySelector('.anticon-cross')).toBeDefined();
+      expect(alert.nativeElement.querySelector('.anticon-close')).toBeDefined();
       alert.nativeElement.querySelector('.ant-alert-close-icon').click();
       fixture.detectChanges();
       tick();

diff --git a/components/alert/style/index.less b/components/alert/style/index.less
@@ -18,7 +18,7 @@
   }
 
   &-icon {
-    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2 + 1px;
+    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
     left: 16px;
     position: absolute;
   }
@@ -70,7 +70,7 @@
     overflow: hidden;
     cursor: pointer;
 
-    .@{iconfont-css-prefix}-cross {
+    .@{iconfont-css-prefix}-close {
       color: @alert-close-color;
       transition: color .3s;
       &:hover {

diff --git a/components/auto-complete/demo/certain-category.ts b/components/auto-complete/demo/certain-category.ts
@@ -10,7 +10,7 @@ import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@
         <input placeholder="input here" nz-input [(ngModel)]="inputValue" (ngModelChange)="onChange($event)" [nzAutocomplete]="auto"/>
       </nz-input-group>
       <ng-template #suffixIcon>
-        <i class="anticon anticon-search"></i>
+        <i nz-cion type="search"></i>
       </ng-template>
       <nz-autocomplete #auto>
         <nz-auto-optgroup *ngFor="let group of optionGroups" [nzLabel]="groupTitle">

diff --git a/components/auto-complete/demo/uncertain-category.ts b/components/auto-complete/demo/uncertain-category.ts
@@ -9,7 +9,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
         <input placeholder="input here" nz-input [(ngModel)]="inputValue" (ngModelChange)="onChange($event)" [nzAutocomplete]="auto"/>
       </nz-input-group>
       <ng-template #suffixIconButton>
-        <button nz-button nzType="primary" nzSize="large" nzSearch><i class="anticon anticon-search"></i></button>
+        <button nz-button nzType="primary" nzSize="large" nzSearch><i nz-icon type="anticon-search"></i></button>
       </ng-template>
       <nz-autocomplete #auto>
         <nz-auto-option *ngFor="let option of options" [nzValue]="option.category">

diff --git a/components/avatar/avatar.spec.ts b/components/avatar/avatar.spec.ts
@@ -2,6 +2,8 @@ import { Component, DebugElement, ViewChild } from '@angular/core';
 import { fakeAsync, tick, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
+import { NzIconModule } from '../icon/nz-icon.module';
+
 import { NzAvatarComponent } from './nz-avatar.component';
 import { NzAvatarModule } from './nz-avatar.module';
 
@@ -18,7 +20,7 @@ describe('avatar', () => {
   let dl: DebugElement;
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ NzAvatarModule ],
+      imports: [ NzAvatarModule, NzIconModule ],
       declarations: [ TestAvatarComponent ]
     }).compileComponents();
     fixture = TestBed.createComponent(TestAvatarComponent);

diff --git a/components/avatar/nz-avatar.component.html b/components/avatar/nz-avatar.component.html
@@ -1,3 +1,3 @@
-<i *ngIf="nzIcon && hasIcon" [ngClass]="nzIcon"></i>
+<i nz-icon *ngIf="nzIcon && hasIcon" [type]="!oldAPIIcon && nzIcon" [ngClass]="oldAPIIcon && nzIcon"></i>
 <img [src]="nzSrc" *ngIf="nzSrc && hasSrc" (error)="imgError()"/>
 <span class="ant-avatar-string" #textEl [ngStyle]="textStyles" *ngIf="nzText && hasText">{{ nzText }}</span>
diff --git a/components/avatar/nz-avatar.component.ts b/components/avatar/nz-avatar.component.ts
@@ -5,11 +5,12 @@ import {
   ElementRef,
   Input,
   OnChanges,
-  SimpleChanges,
+  SimpleChanges, TemplateRef,
   ViewChild
 } from '@angular/core';
 
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
+import { StepNgClassType } from '../steps';
 
 export type NzAvatarShape = 'square' | 'circle';
 export type NzAvatarSize = 'small' | 'large' | 'default';
@@ -25,6 +26,8 @@ export class NzAvatarComponent implements OnChanges {
   private el: HTMLElement;
   private prefixCls = 'ant-avatar';
   private sizeMap = { large: 'lg', small: 'sm' };
+  private _icon: string;
+  oldAPIIcon = true; // Make the user defined icon compatible to old API. Should be removed in 2.0.
   hasText: boolean = false;
   hasSrc: boolean = true;
   hasIcon: boolean = false;
@@ -40,7 +43,17 @@ export class NzAvatarComponent implements OnChanges {
 
   @Input() nzSrc: string;
 
-  @Input() nzIcon: string;
+  @Input()
+  set nzIcon(value: string) {
+    if (value) {
+      this.oldAPIIcon = value.indexOf('anticon') > -1;
+    }
+    this._icon = value;
+  }
+
+  get nzIcon(): string {
+    return this._icon;
+  }
 
   setClass(): this {
     const classMap = {

diff --git a/components/avatar/nz-avatar.module.ts b/components/avatar/nz-avatar.module.ts
@@ -1,12 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { NzIconModule } from '../icon/nz-icon.module';
 
 import { NzAvatarComponent } from './nz-avatar.component';
 
 @NgModule({
   declarations: [ NzAvatarComponent ],
   exports     : [ NzAvatarComponent ],
-  imports     : [ CommonModule ]
+  imports     : [ CommonModule, NzIconModule ]
 })
 export class NzAvatarModule {
 }
diff --git a/components/badge/demo/change.ts b/components/badge/demo/change.ts
@@ -9,8 +9,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
         <a class="head-example"></a>
       </nz-badge>
       <nz-button-group>
-        <button nz-button (click)="minCount()"><i class="anticon anticon-minus"></i></button>
-        <button nz-button (click)="addCount()"><i class="anticon anticon-plus"></i></button>
+        <button nz-button (click)="minCount()"><i nz-icon type="minus"></i></button>
+        <button nz-button (click)="addCount()"><i nz-icon type="plus"></i></button>
       </nz-button-group>
     </div>
 

diff --git a/components/badge/demo/dot.ts b/components/badge/demo/dot.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-badge-dot',
   template: `
-    <nz-badge nzDot><i class="anticon anticon-notification"></i></nz-badge>
+    <nz-badge nzDot><i nz-icon type="notification"></i></nz-badge>
     <nz-badge nzDot><a>Link something</a></nz-badge>
   `,
   styles  : [

diff --git a/components/badge/style/index.less b/components/badge/style/index.less
@@ -13,10 +13,7 @@
   color: unset;
 
   &-count {
-    position: absolute;
-    transform: translate(50%, -50%);
-    top: 0;
-    right: 0;
+    top: -@badge-height / 2;
     height: @badge-height;
     border-radius: @badge-height / 2;
     min-width: @badge-height;
@@ -28,7 +25,6 @@
     font-size: @badge-font-size;
     font-weight: @badge-font-weight;
     white-space: nowrap;
-    transform-origin: 0 center;
     box-shadow: 0 0 0 1px #fff;
     a,
     a:hover {
@@ -41,11 +37,7 @@
   }
 
   &-dot {
-    position: absolute;
-    transform: translate(50%, -50%);
-    transform-origin: 0 center;
-    top: 0;
-    right: 0;
+    top: -@badge-dot-size / 2;
     height: @badge-dot-size;
     width: @badge-dot-size;
     border-radius: 100%;
@@ -54,6 +46,14 @@
     box-shadow: 0 0 0 1px #fff;
   }
 
+  &-count,
+  &-dot {
+    position: absolute;
+    right: 0;
+    transform: translateX(50%);
+    transform-origin: 100%;
+  }
+
   &-status {
     line-height: inherit;
     vertical-align: baseline;
@@ -150,19 +150,19 @@
 @keyframes antZoomBadgeIn {
   0% {
     opacity: 0;
-    transform: scale(0) translateX(-50%);
+    transform: scale(0) translateX(50%);
   }
   100% {
-    transform: scale(1) translateX(-50%);
+    transform: scale(1) translateX(50%);
   }
 }
 
 @keyframes antZoomBadgeOut {
   0% {
-    transform: scale(1) translateX(-50%);
+    transform: scale(1) translateX(50%);
   }
   100% {
     opacity: 0;
-    transform: scale(0) translateX(-50%);
+    transform: scale(0) translateX(50%);
   }
 }
diff --git a/components/breadcrumb/demo/separator.ts b/components/breadcrumb/demo/separator.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { ArrowRightOutline } from '@ant-design/icons-angular/icons';
 
 @Component({
   selector: 'nz-demo-breadcrumb-separator',
@@ -28,7 +29,7 @@ import { Component } from '@angular/core';
         An Application
       </nz-breadcrumb-item>
     </nz-breadcrumb>
-    <ng-template #iconTemplate><i class="anticon anticon-arrow-right"></i></ng-template>
+    <ng-template #iconTemplate><i nz-icon type="arrow-right"></i></ng-template>
   `,
   styles  : [
       `

diff --git a/components/breadcrumb/demo/withIcon.ts b/components/breadcrumb/demo/withIcon.ts
@@ -5,10 +5,10 @@ import { Component } from '@angular/core';
   template: `
     <nz-breadcrumb>
       <nz-breadcrumb-item>
-        <i class="anticon anticon-home"></i>
+        <i nz-icon type="home"></i>
       </nz-breadcrumb-item>
       <nz-breadcrumb-item>
-        <a><i class="anticon anticon-user"></i><span>Application List</span></a>
+        <a><i nz-icon type="user"></i><span>Application List</span></a>
       </nz-breadcrumb-item>
       <nz-breadcrumb-item>
         Application

diff --git a/components/breadcrumb/nz-breadcrumb.spec.ts b/components/breadcrumb/nz-breadcrumb.spec.ts
@@ -5,6 +5,7 @@ import { Router, Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { CommonModule } from '@angular/common';
+import { NzIconModule } from '../icon/nz-icon.module';
 import { NzDemoBreadcrumbBasicComponent } from './demo/basic';
 import { NzDemoBreadcrumbSeparatorComponent } from './demo/separator';
 import { NzBreadCrumbItemComponent } from './nz-breadcrumb-item.component';
@@ -46,7 +47,7 @@ describe('breadcrumb', () => {
     let breadcrumbs;
     beforeEach(async(() => {
       TestBed.configureTestingModule({
-        imports     : [ NzBreadCrumbModule ],
+        imports     : [ NzBreadCrumbModule, NzIconModule ],
         declarations: [ NzDemoBreadcrumbSeparatorComponent ],
         providers   : []
       }).compileComponents();