feat(module:icon): support rotate (#2891)

* feat(module:icon): support rotate close #2888 * fix: switch to API with prefix * docs: raname API in demo
NG-ZORRO · Feb 18, 2019 · 07f76af · 07f76af
1 parent a67984c
commit 07f76af
Show file tree

Hide file tree

Showing 9 changed files with 181 additions and 98 deletions.
diff --git a/components/icon/demo/basic.md b/components/icon/demo/basic.md
@@ -7,8 +7,8 @@ title:
 
 ## zh-CN
 
-使用 `<i nz-icon></i>` 标签声明组件，指定图标对应的 `type` 属性。可以通过 `theme` 属性来设置不同的主题风格的图标，也可以通过设置 `spin` 属性来实现动画旋转效果。对旧的 API `<i class="anticon"></i>` 兼容。
+使用 `<i nz-icon></i>` 标签声明组件，指定图标对应的 `nzType` 属性。可以通过 `nzTheme` 属性来设置不同的主题风格的图标，也可以通过设置 `nzSpin` 属性来实现动画旋转效果。对旧的 API `<i class="anticon"></i>` 兼容。
 
 ## en-US
 
-Use `<i nz-icon></i>` to create an icon and set its type in the `type` prop. Specific the `spin` prop to show spinning animation and the theme property to switch different themes. Old API `<i class="anticon"></i>`
+Use `<i nz-icon></i>` to create an icon and set its type in the `nzType` prop. Specific the `nzSpin` prop to show spinning animation and the theme property to switch different themes. Old API `<i class="anticon"></i>`
diff --git a/components/icon/demo/basic.ts b/components/icon/demo/basic.ts
@@ -4,12 +4,13 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-icon-basic',
   template: `
     <div class="icons-list">
-      <i nz-icon [type]="'home'"></i>
-      <i nz-icon [type]="'setting'" [theme]="'fill'"></i>
-      <i nz-icon [type]="'smile'" [theme]="'outline'"></i>
-      <i nz-icon [type]="'sync'" [spin]="true"></i>
+      <i nz-icon [nzType]="'home'"></i>
+      <i nz-icon [nzType]="'setting'" [nzTheme]="'fill'"></i>
+      <i nz-icon [nzType]="'smile'" [nzTheme]="'outline'"></i>
+      <i nz-icon [nzType]="'sync'" [nzSpin]="true"></i>
+      <i nz-icon [nzType]="'smile'" [nzTheme]="'outline'" [nzRotate]="180"></i>
       <!-- Loading with new API would spin automatically! -->
-      <i nz-icon [type]="'loading'"></i>
+      <i nz-icon [nzType]="'loading'"></i>
     </div>
   `,
   styles: [ `

diff --git a/components/icon/demo/iconfont.ts b/components/icon/demo/iconfont.ts
@@ -5,9 +5,9 @@ import { NzIconService } from 'ng-zorro-antd';
   selector: 'nz-demo-icon-iconfont',
   template: `
     <div class="icons-list">
-      <i nz-icon [iconfont]="'icon-tuichu'"></i>
-      <i nz-icon [iconfont]="'icon-facebook'" ></i>
-      <i nz-icon [iconfont]="'icon-twitter'"></i>
+      <i nz-icon [nzIconfont]="'icon-tuichu'"></i>
+      <i nz-icon [nzIconfont]="'icon-facebook'" ></i>
+      <i nz-icon [nzIconfont]="'icon-twitter'"></i>
     </div>
   `,
   styles  : [ `

diff --git a/components/icon/demo/twotone.md b/components/icon/demo/twotone.md
@@ -7,8 +7,8 @@ title:
 
 ## zh-CN
 
-可以通过设置 `theme` 属性为 `twotone` 来渲染双色图标，并且可以设置主题色。
+可以通过设置 `nzTheme` 属性为 `twotone` 来渲染双色图标，并且可以设置主题色。
 
 ## en-US
 
-Specify property `theme` to `twotone` to render two-tone icons. You can also set the primary color.
+Specify property `nzTheme` to `twotone` to render two-tone icons. You can also set the primary color.
diff --git a/components/icon/demo/twotone.ts b/components/icon/demo/twotone.ts
@@ -4,9 +4,9 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-icon-twotone',
   template: `
     <div class="icons-list">
-      <i nz-icon [type]="'smile'" [theme]="'twotone'"></i>
-      <i nz-icon [type]="'heart'" [theme]="'twotone'" [twoToneColor]="'#eb2f96'"></i>
-      <i nz-icon [type]="'check-circle'" [theme]="'twotone'" [twoToneColor]="'#52c41a'"></i>
+      <i nz-icon [nzType]="'smile'" [nzTheme]="'twotone'"></i>
+      <i nz-icon [nzType]="'heart'" [nzTheme]="'twotone'" [nzTwotoneColor]="'#eb2f96'"></i>
+      <i nz-icon [nzType]="'check-circle'" [nzTheme]="'twotone'" [nzTwotoneColor]="'#52c41a'"></i>
     </div>
   `,
   styles  : [ `

diff --git a/components/icon/doc/index.en-US.md b/components/icon/doc/index.en-US.md
@@ -24,12 +24,14 @@ We are still adding two-tone icons right now, syncing to [antd](https://ant.desi
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| `[type]` | Type of the ant design icon | `string` | - |
-| `[theme]` | Type of the ant design icon | `'fill'｜'outline'｜'twotone'` | `'outline'` |
-| `[spin]` | Rotate icon with animation | `boolean` | `false` |
-| `[twoToneColor]` | Only support the two-tone icon. Specific the primary color. | `string (hex color)` | - |
-| `[iconfont]` | Type of the icon from iconfont | `string` | - |
-
+| `[nzType]` | Type of the ant design icon | `string` | - |
+| `[nzTheme]` | Type of the ant design icon | `'fill'｜'outline'｜'twotone'` | `'outline'` |
+| `[nzSpin]` | Rotate icon with animation | `boolean` | `false` |
+| `[nzTwotoneColor]` | Only support the two-tone icon. Specific the primary color. | `string (hex color)` | - |
+| `[nzIconfont]` | Type of the icon from iconfont | `string` | - |
+| `[nzRotate]` | Rotate degrees (since 7.0.0) | `number` | - |
+
+<blockquote style="border-color: red;"><p><strong>API that is not started with nz and old API that is based on icon class names would be deprecated in 8.0.0. Please migrate.</strong></p></blockquote>
 
 ### NzIconService
 

diff --git a/components/icon/doc/index.zh-CN.md b/components/icon/doc/index.zh-CN.md
@@ -25,11 +25,14 @@ hasPageDemo: true
 
 | 参数             | 说明                                                         | 类型                         | 默认值    |
 | ---------------- | ------------------------------------------------------------ | ---------------------------- | --------- |
-| `[type]`         | 图标类型，遵循图标的命名规范                                 | string                       | -         |
-| `[theme]`        | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 | `fill 丨 outline 丨 twotone` | `outline` |
-| `[spin]`         | 是否有旋转动画                                               | `boolean`                    | `false`   |
-| `[twoToneColor]` | 仅适用双色图标，设置双色图标的主要颜色，仅对当前 icon 生效   | `string (十六进制颜色)`      | -         |
-| `[iconfont]`     | 指定来自 IconFont 的图标类型                                 | string                       | -         |
+| `[nzType]`         | 图标类型，遵循图标的命名规范                                 | string                       | -         |
+| `[nzTheme]`        | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 | `'fill'丨'outline'丨'twotone'` | `'outline'` |
+| `[nzSpin]`       | 是否有旋转动画                                          | `boolean`                    | `false` |
+| `[nzTwotoneColor]` | 仅适用双色图标，设置双色图标的主要颜色，仅对当前 icon 生效   | `string (十六进制颜色)`      | -         |
+| `[nzIconfont]`     | 指定来自 IconFont 的图标类型                                 | string                       | -         |
+| `[nzRotate]` | 图标旋转角度（7.0.0 开始支持） | `number` | - |
+
+<blockquote style="border-color: red;"><p><strong>不加上 nz 前缀的 API，以及原使用 icon 类名的 API 将会在 8.0.0 及之后不被支持，请及时迁移。</strong></p></blockquote>
 
 ### NzIconService
 

diff --git a/components/icon/nz-icon.directive.ts b/components/icon/nz-icon.directive.ts
@@ -8,7 +8,8 @@ import {
   OnInit,
   Renderer2
 } from '@angular/core';
-import { IconDirective } from '@ant-design/icons-angular';
+import { IconDirective, ThemeType } from '@ant-design/icons-angular';
+import { InputBoolean } from '../core/util';
 import { NzIconService } from './nz-icon.service';
 
 const iconTypeRE = /^anticon\-\w/;
@@ -43,12 +44,31 @@ const normalizeType = (rawType: string): { type: string, crossError: boolean, ve
  * - IconFont support
  * - spinning
  * - old API compatibility
+ *
+ * @break-changes
+ *
+ * - old API compatibility, icon class names would not be supported.
+ * - properties that not started with `nz`.
  */
 @Directive({
-  selector: 'i.anticon, [nz-icon]'
+  selector: 'i.anticon, [nz-icon]',
+  host    : {
+    '[style.transform]': 'nzRotate !== 0 ? "rotate(" + nzRotate + "deg)" : null'
+  }
 })
 export class NzIconDirective extends IconDirective implements OnInit, OnChanges, OnDestroy, AfterContentChecked {
+  /** Properties with `nz` prefix. */
+  @Input() @InputBoolean() set nzSpin(value: boolean) { this.spin = value; }
+  @Input() nzRotate: number = 0;
+  @Input() set nzType(value: string) { this.type = value; }
+  @Input() set nzTheme(value: ThemeType) { this.theme = value; }
+  @Input() set nzTwotoneColor(value: string) { this.twoToneColor = value; }
+  @Input() set nzIconfont(value: string) { this.iconfont = value; }
+
+  /** @deprecated 8.0.0 avoid exposing low layer API. */
   @Input() spin = false;
+
+  /** @deprecated 8.0.0 avoid exposing low layer API. */
   @Input() iconfont: string;
 
   @Input()
@@ -84,7 +104,7 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
       .then(svg => {
         this.setSVGData(svg);
         if (!oldAPI && svg) {
-          this.toggleSpin(svg);
+          this.handleSpin(svg);
         }
       });
   }
@@ -106,7 +126,7 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
     }
   }
 
-  private toggleSpin(svg: SVGElement): void {
+  private handleSpin(svg: SVGElement): void {
     if ((this.spin || this.type === 'loading') && !this.elementRef.nativeElement.classList.contains('anticon-spin')) {
       this.renderer.addClass(svg, 'anticon-spin');
     } else {