fix(module:icon): fix broken icons (#2248)

* fix(module:icon): fix broken icons * fix select close icon * fix loading style and bad case, change warning message * fix icon test * fix select close icon
NG-ZORRO · Oct 9, 2018 · e0d9987 · e0d9987
1 parent 7bdb79b
commit e0d9987
Show file tree

Hide file tree

Showing 24 changed files with 101 additions and 61 deletions.
diff --git a/components/alert/nz-alert.component.html b/components/alert/nz-alert.component.html
@@ -2,7 +2,7 @@
   <ng-container *ngIf="nzShowIcon">
     <i class="ant-alert-icon" [ngClass]="nzIconType" *ngIf="nzIconType; else iconTemplate"></i>
     <ng-template #iconTemplate>
-      <i nz-icon type="alert" class="ant-alert-icon anticon" [ngClass]="iconClassMap"></i>
+      <i nz-icon class="ant-alert-icon" [type]="iconType"></i>
     </ng-template>
   </ng-container>
   <span class="ant-alert-message" *ngIf="nzMessage">

diff --git a/components/alert/nz-alert.component.ts b/components/alert/nz-alert.component.ts
@@ -40,7 +40,7 @@ export class NzAlertComponent implements OnInit {
   isMessageString: boolean;
   isCloseTextString: boolean;
   outerClassMap;
-  iconClassMap;
+  iconType;
   @Output() nzOnClose: EventEmitter<boolean> = new EventEmitter();
   @Input() nzIconType: NgClassType;
 
@@ -145,16 +145,22 @@ export class NzAlertComponent implements OnInit {
   }
 
   updateIconClassMap(): void {
-    this.iconClassMap = {
-      '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'
+    const iconType = {
+      'close-circle-o'         : this.nzDescription && this.nzType === 'error',
+      'check-circle-o'         : this.nzDescription && this.nzType === 'success',
+      'info-circle-o'          : this.nzDescription && this.nzType === 'info',
+      'exclamation-circle-o'   : this.nzDescription && this.nzType === 'warning',
+      'close-circle-fill'      : (!this.nzDescription) && this.nzType === 'error',
+      'check-circle-fill'      : (!this.nzDescription) && this.nzType === 'success',
+      'info-circle-fill'       : (!this.nzDescription) && this.nzType === 'info',
+      'exclamation-circle-fill': (!this.nzDescription) && this.nzType === 'warning'
     };
+
+    Object.keys(iconType).forEach(key => {
+      if (iconType[ key ]) {
+        this.iconType = key;
+      }
+    });
   }
 
   ngOnInit(): void {

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 nz-cion type="search"></i>
+        <i nz-icon 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 nz-icon type="anticon-search"></i></button>
+        <button nz-button nzType="primary" nzSize="large" nzSearch><i nz-icon type="search" theme="outline"></i></button>
       </ng-template>
       <nz-autocomplete #auto>
         <nz-auto-option *ngFor="let option of options" [nzValue]="option.category">

diff --git a/components/button/nz-button.spec.ts b/components/button/nz-button.spec.ts
@@ -167,7 +167,7 @@ describe('button', () => {
       tick();
       fixture.detectChanges();
       expect(button.nativeElement.classList.contains('ant-btn-loading')).toBe(true);
-      expect(button.nativeElement.firstElementChild.querySelector('svg').classList.contains('anticon-spin')).toBe(true);
+      expect(button.nativeElement.firstElementChild.classList.contains('anticon-spin')).toBe(true);
       expect(button.nativeElement.firstElementChild.classList.contains('anticon-loading')).toBe(true);
       expect(button.nativeElement.firstElementChild.localName).toBe('i');
       tick(5000);
@@ -179,15 +179,15 @@ describe('button', () => {
       const button = buttons[ 3 ];
       fixture.detectChanges();
       expect(button.nativeElement.classList.contains('ant-btn-loading')).toBe(false);
-      expect(button.nativeElement.firstElementChild.querySelector('svg')).toBe(null);
+      expect(button.nativeElement.firstElementChild.classList.contains('anticon-apin')).toBe(false);
       expect(button.nativeElement.firstElementChild.classList.contains('anticon-loading')).toBe(false);
       expect(button.nativeElement.firstElementChild.localName).toBe('i');
       button.nativeElement.click();
       fixture.detectChanges();
       tick();
       fixture.detectChanges();
       expect(button.nativeElement.classList.contains('ant-btn-loading')).toBe(true);
-      expect(button.nativeElement.firstElementChild.querySelector('svg').classList.contains('anticon-spin')).toBe(true);
+      expect(button.nativeElement.firstElementChild.classList.contains('anticon-spin')).toBe(true);
       expect(button.nativeElement.firstElementChild.classList.contains('anticon-loading')).toBe(true);
       expect(button.nativeElement.firstElementChild.localName).toBe('i');
       tick(5000);

diff --git a/components/date-picker/lib/calendar/calendar-input.component.html b/components/date-picker/lib/calendar/calendar-input.component.html
@@ -7,5 +7,7 @@
       (keyup)="onInputKeyup($event)"
     />
   </div>
-  <a class="{{ prefixCls }}-clear-btn" role="button" title="{{ locale.clear }}"></a>
+  <a class="{{ prefixCls }}-clear-btn" role="button" title="{{ locale.clear }}">
+    <!--<i nz-icon type="close"></i>-->
+  </a>
 </div>
diff --git a/components/date-picker/picker.component.html b/components/date-picker/picker.component.html
@@ -49,8 +49,11 @@
 <!-- Right operator icons -->
 <ng-template #tplRightRest>
   <i
+    nz-icon
+    type="close-circle"
+    theme="fill"
     *ngIf="!disabled && !isEmptyValue(value) && allowClear"
-    class="anticon anticon-cross-circle {{ prefixCls }}-picker-clear"
+    class="{{ prefixCls }}-picker-clear"
     (click)="onClickClear($event)"
   ></i>
   <span class="{{ prefixCls }}-picker-icon">

diff --git a/components/drawer/nz-drawer.component.html b/components/drawer/nz-drawer.component.html
@@ -24,7 +24,9 @@
               </ng-container>
             </div>
           </div>
-          <button *ngIf="nzClosable" (click)="closeClick()" aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"></span></button>
+          <button *ngIf="nzClosable" (click)="closeClick()" aria-label="Close" class="ant-drawer-close">
+            <span class="ant-drawer-close-x"><i nz-icon type="close"></i></span>
+          </button>
           <div class="ant-drawer-body" [ngStyle]="nzBodyStyle">
             <ng-template cdkPortalOutlet></ng-template>
             <ng-container *ngIf="isTemplateRef(nzContent)">

diff --git a/components/drawer/nz-drawer.module.ts b/components/drawer/nz-drawer.module.ts
@@ -2,12 +2,13 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { PortalModule } from '@angular/cdk/portal';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { NzIconModule } from '../icon/nz-icon.module';
 
 import { NzDrawerComponent } from './nz-drawer.component';
 import { NzDrawerService } from './nz-drawer.service';
 
 @NgModule({
-  imports        : [ CommonModule, OverlayModule, PortalModule ],
+  imports        : [ CommonModule, OverlayModule, PortalModule, NzIconModule ],
   exports        : [ NzDrawerComponent ],
   declarations   : [ NzDrawerComponent ],
   entryComponents: [ NzDrawerComponent ],

diff --git a/components/form/demo/dynamic-form-item.ts b/components/form/demo/dynamic-form-item.ts
@@ -15,7 +15,7 @@ import {
         <nz-form-label [nzXs]="24" [nzSm]="4" *ngIf="i==0" [nzFor]="control.controlInstance">Passengers</nz-form-label>
         <nz-form-control [nzXs]="24" [nzSm]="20" [nzOffset]="i==0?0:4">
           <input nz-input style="width: 60%; margin-right:8px;" placeholder="placeholder" [attr.id]="control.id" [formControlName]="control.controlInstance">
-          <i nz-icon type="minus-circle-o" type="dynamic-delete-button" (click)="removeField(control,$event)"></i>
+          <i nz-icon type="minus-circle-o" class="dynamic-delete-button" (click)="removeField(control,$event)"></i>
           <nz-form-explain *ngIf="getFormControl(control.controlInstance)?.dirty&&getFormControl(control.controlInstance)?.hasError('required')">
             Please input passenger's name or delete this field.
           </nz-form-explain>

diff --git a/components/icon/demo/basic.ts b/components/icon/demo/basic.ts
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
       <i nz-icon [type]="'smile'" [theme]="'outline'"></i>
       <i nz-icon [type]="'sync'" [spin]="true"></i>
       <i nz-icon [type]="'loading'"></i>
-      <br>
+      <br><br>
       <i class="anticon anticon-home"></i>
       <i class="anticon anticon-setting"></i>
       <i class="anticon anticon-smile"></i>

diff --git a/components/icon/doc/index.en-US.md b/components/icon/doc/index.en-US.md
@@ -17,8 +17,6 @@ We are still adding two-tone icons right now, syncing to [antd](https://ant.desi
 
 ### [nz-icon]
 
-All props of input supported by [w3c standards](https://www.w3schools.com/tags/tag_input.asp) and Angular can used in `nz-input`.
-
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | `[type]` | Type of the ant design icon | string | - |
@@ -123,7 +121,7 @@ We added a `fetchFromIconfont` method function to help developer using their own
 
 ```ts
 this._iconService.fetchFromIconfont({
-  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'
+  scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'
 });
 ```
 

diff --git a/components/icon/doc/index.zh-CN.md b/components/icon/doc/index.zh-CN.md
@@ -120,7 +120,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 
 ```ts
 this._iconService.fetchFromIconfont({
-  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'
+  scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'
 });
 ```
 

diff --git a/components/icon/nz-icon.directive.ts b/components/icon/nz-icon.directive.ts
@@ -28,6 +28,7 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
 
   // private _renderer: Renderer2;
   private _classNameObserver: MutationObserver;
+  private _el: HTMLElement;
 
   /**
    * In order to make this directive compatible to old API, we had do some ugly stuff here.
@@ -38,33 +39,46 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
       return;
     }
 
+    const forceSpin = className.indexOf('anticon-spin') > -1;
     const classArr = className.split(/\s/);
-    const hasAnticonTag = className.indexOf('anticon') > -1;
-    const autoSpin = className.indexOf('anticon-loading') > -1;
-    let anticonType = classArr.filter(cls => cls !== 'anticon' && cls !== 'anticon-spin' && cls.startsWith('anticon-'))[ 0 ];
+    let anticonType = classArr.filter(cls => cls !== 'anticon' && cls !== 'anticon-spin' && cls.match(/^anticon\-\w/))[ 0 ];
 
-    if (!hasAnticonTag || !anticonType) {
+    if (!anticonType) {
       return;
     }
 
     anticonType = anticonType.replace('anticon-', '');
-
-    // This is misspelled in old versions...
-    if (anticonType.indexOf('verticle') > -1) {
-      console.error(`'verticle' is misspelled, would be corrected in the next major version.`);
+    if (anticonType.includes('verticle')) {
       anticonType = anticonType.replace('verticle', 'vertical');
+      if (!this._iconService.warnedAboutVertical) {
+        console.warn('[NG-ZORRO]', `'verticle' is misspelled, would be corrected in the next major version.`);
+        this._iconService.warnedAboutVertical = true;
+      }
+    }
+    if (anticonType.startsWith('cross')) {
+      anticonType = anticonType.replace('cross', 'close');
+      if (!this._iconService.warnedAboutCross) {
+        console.warn('[NG-ZORRO]', `'cross' icon is replaced by 'close' icon.`);
+        this._iconService.warnedAboutCross = true;
+      }
     }
-    // Add default outline theme.
     if (!(anticonType.endsWith('-o') || anticonType.endsWith('-fill') || anticonType.endsWith('-twotone'))) {
       anticonType += '-o';
     }
-    this.spin = autoSpin || this.spin;
+    if (anticonType.startsWith('loading') || forceSpin) {
+      this.spin = true;
+    } else {
+      this.spin = false;
+    }
+
     if (this.type !== anticonType) {
       this.type = anticonType;
-      this._changeIcon().then(svg => {
+      this._changeIcon()
+      .then(svg => {
         this._addExtraModifications(svg);
-      }).catch(() => {
-        console.warn('[NG-ZORRO]', `You can find more about this error on http://ng.ant.design/components/icon/en`);
+      })
+      .catch(err => {
+        console.warn('[NG-ZORRO]', `You can find more about this error on http://ng.ant.design/components/icon/en\n`, err);
       });
     }
   }
@@ -78,9 +92,9 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
 
   private _addExtraModifications(svg: SVGElement): void {
     if (this.spin || this.type === 'loading') {
-      this._renderer.addClass(svg, 'anticon-spin');
+      this._renderer.addClass(this._el, 'anticon-spin');
     } else {
-      this._renderer.removeClass(svg, 'anticon-spin');
+      this._renderer.removeClass(this._el, 'anticon-spin');
     }
   }
 
@@ -117,19 +131,18 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
    * Subscribe to DOM element attribute change events, so when user use ngClass or something the icon changes with it.
    */
   ngOnInit(): void {
-    const element = this._elementRef.nativeElement as HTMLElement;
-    if (element && element.className.indexOf('anticon') > -1 && !this.type) {
+    this._el = this._elementRef.nativeElement;
+    if (this._el && !this.type) {
       this._warnAPI();
-      this._classChangeHandler(element.className); // In case mutations didn't catch the init status.
+      this._classChangeHandler(this._el.className);
       this._classNameObserver = new MutationObserver((mutations: MutationRecord[]) => {
         mutations
         .filter((mutation: MutationRecord) => mutation.attributeName === 'class')
         .forEach((mutation: MutationRecord) => this._classChangeHandler((mutation.target as HTMLElement).className));
       });
       this._classNameObserver.observe(this._elementRef.nativeElement, { attributes: true });
-    } else {
-      this._renderer.addClass(this._elementRef.nativeElement, 'anticon');
     }
+    this._renderer.addClass(this._elementRef.nativeElement, 'anticon');
   }
 
   ngOnDestroy(): void {

diff --git a/components/icon/nz-icon.service.ts b/components/icon/nz-icon.service.ts
@@ -8,6 +8,7 @@ import {
   CheckCircleOutline,
   CheckOutline,
   ClockCircleOutline,
+  CloseCircleFill,
   CloseCircleOutline,
   CloseOutline,
   DoubleLeftOutline,
@@ -40,6 +41,8 @@ export class NzIconService extends IconService {
   private _iconfontCache = new Set<string>();
 
   warnedAboutAPI = false;
+  warnedAboutCross = false; // TODO: remove in 2.0
+  warnedAboutVertical = false;
 
   normalizeSvgElement(svg: SVGElement): void {
     if (!svg.getAttribute('viewBox')) {
@@ -84,6 +87,7 @@ export class NzIconService extends IconService {
       CheckOutline,
       ClockCircleOutline,
       CloseCircleOutline,
+      CloseCircleFill,
       CloseOutline,
       DoubleLeftOutline,
       DoubleRightOutline,

diff --git a/components/icon/nz-icon.spec.ts b/components/icon/nz-icon.spec.ts
@@ -30,19 +30,19 @@ describe('icon', () => {
       fixture.detectChanges();
       tick(1000);
       fixture.detectChanges();
-      expect(icons[ 0 ].nativeElement.querySelector('svg').outerHTML).toContain('anticon-spin');
+      expect(icons[ 0 ].nativeElement.classList.contains('anticon-spin')).toBe(true);
       testComponent.spin = false;
       fixture.detectChanges();
       tick(1000);
       fixture.detectChanges();
-      expect(icons[ 0 ].nativeElement.querySelector('svg').outerHTML).not.toContain('anticon-spin');
+      expect(icons[ 0 ].nativeElement.classList.contains('anticon-spin')).toBe(false);
     }));
 
     it('should make loading spin', fakeAsync(() => {
       fixture.detectChanges();
       tick(1000);
       fixture.detectChanges();
-      expect(icons[ 1 ].nativeElement.querySelector('svg').outerHTML).toContain('anticon-spin');
+      expect(icons[ 1 ].nativeElement.classList.contains('anticon-spin')).toBe(true);
     }));
   });
 
@@ -103,7 +103,7 @@ describe('icon', () => {
       fixture.detectChanges();
       tick(1000);
       fixture.detectChanges();
-      expect(icons[ 1 ].nativeElement.querySelector('svg').outerHTML).toContain('anticon-spin');
+      expect(icons[ 1 ].nativeElement.classList.contains('anticon-spin')).toBe(true);
     }));
   });
 });

diff --git a/components/notification/nz-notification.component.html b/components/notification/nz-notification.component.html
@@ -20,6 +20,8 @@
   </div>
   <ng-template [ngIf]="nzMessage.template" [ngTemplateOutlet]="nzMessage.template" [ngTemplateOutletContext]="{ $implicit: this }"></ng-template>
   <a tabindex="0" class="ant-notification-notice-close" (click)="close()">
-    <span class="ant-notification-notice-close-x"></span>
+    <span class="ant-notification-notice-close-x">
+      <i nz-icon type="close" class="ant-notification-close-icon"></i>
+    </span>
   </a>
 </div>
diff --git a/components/select/nz-select-top-control.component.html b/components/select/nz-select-top-control.component.html
@@ -47,7 +47,9 @@
       [class.ant-select-selection__choice__disabled]="getPropertyFromValue(value,'nzDisabled')"
       class="ant-select-selection__choice">
       <div class="ant-select-selection__choice__content">{{ getPropertyFromValue(value, 'nzLabel') || value }}</div>
-      <span *ngIf="!getPropertyFromValue(value,'nzDisabled')" class="ant-select-selection__choice__remove" (click)="removeValueFormSelected(value)"></span>
+      <span *ngIf="!getPropertyFromValue(value,'nzDisabled')" class="ant-select-selection__choice__remove" (click)="removeValueFormSelected(value)">
+        <i nz-icon type="close" class="ant-select-remove-icon"></i>
+      </span>
     </li>
   </ng-container>
 

diff --git a/components/select/nz-select.component.html b/components/select/nz-select.component.html
@@ -18,7 +18,9 @@
     (nzOnSearch)="onSearch($event.value,$event.emit)"
     (nzListOfSelectedValueChange)="updateListOfSelectedValueFromTopControl($event)">
   </div>
-  <span *ngIf="nzAllowClear" class="ant-select-selection__clear" nz-select-unselectable (click)="onClearSelection($event)"></span>
+  <span *ngIf="nzAllowClear" class="ant-select-selection__clear" nz-select-unselectable (click)="onClearSelection($event)">
+    <i nz-icon type="close-circle" theme="fill" class="ant-select-close-icon"></i>
+  </span>
   <span class="ant-select-arrow" nz-select-unselectable>
     <i nz-icon type="down" class="ant-select-arrow-icon"></i>
     <b></b>

diff --git a/components/spin/demo/custom-indicator.ts b/components/spin/demo/custom-indicator.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-spin-custom-indicator',
   template: `
-    <ng-template #indicatorTemplate><i nz-icon type="spin anticon-loading" style="font-size: 24px;"></i>
+    <ng-template #indicatorTemplate><i nz-icon type="loading" style="font-size: 24px;"></i>
     </ng-template>
     <nz-spin [nzIndicator]="indicatorTemplate">
     </nz-spin>`
-Original file line number
+Diff line change
@@ Expand Up @@
     ```ts
     this._iconService.fetchFromIconfont({
-      scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'
+      scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'
     });
     ```
@@ Expand Down @@