feat(*): migrate [nz-icon] to nz-icon tag

.vscode/launch.json

@@ -28,14 +28,11 @@
       "type": "node",
       "request": "launch",
       "name": "schematics test",
-      "runtimeArgs": ["-r", "ts-node/register"],
-      "cwd": "${workspaceRoot}",
-      "sourceMaps": true,
-      "internalConsoleOptions": "openOnSessionStart",
-      "env": {
-        "TS_NODE_PROJECT": "${workspaceFolder}/schematics/tsconfig.spec.json"
-      },
-      "args": ["${workspaceFolder}/schematics/test.ts"]
+      "program": "${workspaceFolder}/schematics/test.ts",
+      "runtimeExecutable": "tsx",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "skipFiles": []
     }
   ]
 }

package.json

@@ -170,6 +170,7 @@
     "terser": "^5.37.0",
     "ts-node": "~10.9.2",
     "tsconfig-paths": "^4.2.0",
+    "tsx": "^4.19.2",
     "typescript": "~5.7.2",
     "xlsx": "^0.18.5"
   },

packages/abc/cell/cell.component.ts

@@ -105,7 +105,7 @@ import type { CellDefaultText, CellOptions, CellTextResult, CellValue } from './
       }
     </ng-template>
     @if (loading) {
-      <span nz-icon nzType="loading"></span>
+      <nz-icon nzType="loading" />
     } @else {
       <ng-template [ngTemplateOutlet]="textWrap" />
     }

packages/abc/error-collect/error-collect.component.ts

@@ -23,7 +23,7 @@ import { NzIconDirective } from 'ng-zorro-antd/icon';
   selector: 'error-collect, [error-collect]',
   exportAs: 'errorCollect',
   template: `
-    <i nz-icon nzType="exclamation-circle"></i>
+    <nz-icon nzType="exclamation-circle" />
     <span class="error-collect__count">{{ count }}</span>
   `,
   host: {

packages/abc/global-footer/demo/basic.md

@@ -17,7 +17,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
   template: `
     <div style="height: 280px;"></div>
     <global-footer [links]="links">
-      Copyright<i nz-icon nzType="copyright" class="mx-sm"></i>
+      Copyright<nz-icon nzType="copyright" class="mx-sm" />
       2023
       <a href="//github.com/cipchk" target="_blank" class="mx-sm">卡色</a>出品
     </global-footer>

packages/abc/global-footer/demo/custom.md

@@ -19,10 +19,10 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
     <global-footer>
       <global-footer-item href="https://ng-alain.com/" blankTarget>帮助</global-footer-item>
       <global-footer-item href="https://github.com/ng-alain" blankTarget>
-        <i nz-icon nzType="github"></i>
+        <nz-icon nzType="github" />
       </global-footer-item>
       <global-footer-item href="https://ng-alain.surge.sh/" blankTarget>预览</global-footer-item>
-      Copyright<i nz-icon nzType="copyright" class="mx-sm"></i>
+      Copyright<nz-icon nzType="copyright" class="mx-sm" />
       2023
       <a href="//github.com/cipchk" target="_blank" class="mx-sm">卡色</a>出品
     </global-footer>

packages/abc/loading/loading.component.html

@@ -5,7 +5,7 @@
         <nz-spin nzSimple />
       }
       @case ('icon') {
-        <i nz-icon [nzType]="icon.type!" [nzTheme]="icon.theme!" [nzSpin]="icon.spin"></i>
+        <nz-icon [nzType]="icon.type!" [nzTheme]="icon.theme!" [nzSpin]="icon.spin" />
       }
       @default {
         <div class="loading-default__custom" [style]="custom.style!" [innerHTML]="custom.html"></div>

packages/abc/notice-icon/notice-icon.component.html

@@ -1,6 +1,6 @@
 <ng-template #badgeTpl>
   <nz-badge [nzCount]="count" [class]="btnClass!" [nzStyle]="{ 'box-shadow': 'none' }">
-    <i nz-icon nzType="bell" [class]="btnIconClass!"></i>
+    <nz-icon nzType="bell" [class]="btnIconClass!" />
   </nz-badge>
 </ng-template>
 @if (data!.length <= 0) {

packages/abc/page-header/demo/standard.md

@@ -47,7 +47,7 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs';
           <button nz-button>操作</button>
         </nz-button-group>
         <button nz-button nz-dropdown [nzDropdownMenu]="actionMoreMenu" class="mx-sm">
-          <i nz-icon nzType="ellipsis"></i>
+          <nz-icon nzType="ellipsis" />
         </button>
         <nz-dropdown-menu #actionMoreMenu="nzDropdownMenu">
           <ul nz-menu>

packages/abc/pdf/demo/design.md

@@ -43,7 +43,7 @@ import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload';
           </se>
           <se label="Local of the pdf file">
             <nz-upload nzAccept=".pdf" [nzBeforeUpload]="beforeUpload">
-              <button nz-button><i nz-icon nzType="upload"></i>Select File</button>
+              <button nz-button><nz-icon nzType="upload" />Select File</button>
             </nz-upload>
           </se>
           <se label="Render Text">

packages/abc/quick-menu/quick-menu.component.html

@@ -2,7 +2,7 @@
   <div class="quick-menu__ctrl" [style]="ctrlStyle">
     <div class="quick-menu__ctrl-icon">
       <ng-container *nzStringTemplateOutlet="icon">
-        <i nz-icon [nzType]="$any(icon)"></i>
+        <nz-icon [nzType]="$any(icon)" />
       </ng-container>
     </div>
   </div>

packages/abc/result/demo/classic.md

@@ -44,8 +44,7 @@ import { NzStepsModule } from 'ng-zorro-antd/steps';
             <ng-template #createDesc>
               <div style="font-size: 14px; position: relative; left: 38px; text-align: left;">
                 <div style="margin-top: 8px; margin-bottom: 4px;"
-                  >曲丽丽<i nz-icon nzType="dingding" class="ml-sm"></i
-                ></div>
+                  >曲丽丽<nz-icon nzType="dingding" class="ml-sm" /></div>
                 <div style="margin-top: 8px; margin-bottom: 4px;">2016-12-12 12:32</div>
               </div>
             </ng-template>
@@ -54,7 +53,7 @@ import { NzStepsModule } from 'ng-zorro-antd/steps';
             <ng-template #checkedDesc>
               <div style="font-size: 14px; position: relative; left: 38px; text-align: left;">
                 <div style="margin-top: 8px; margin-bottom: 4px;">
-                  周毛毛<i nz-icon nzType="dingding" class="ml-sm" style="color: #00a0e9;"></i>
+                  周毛毛<nz-icon nzType="dingding" class="ml-sm" style="color: #00a0e9;"/>
                 </div>
                 <div style="margin-top: 8px; margin-bottom: 4px;">
                   <a (click)="msg.success('click')">催一下</a>

packages/abc/result/demo/fail.md

@@ -19,12 +19,12 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
       <ng-template #resultExtra>
         <div class="mb-md text-lg">您提交的内容有如下错误：</div>
         <div class="mb-md">
-          <i nz-icon nzType="close-circle" class="text-error pr-sm"></i>您的账户已被冻结
-          <a class="ml-md">立即解冻<i nz-icon nzType="right" class="pl-sm"></i></a>
+          <nz-icon nzType="close-circle" class="text-error pr-sm"/>您的账户已被冻结
+          <a class="ml-md">立即解冻<nz-icon nzType="right" class="pl-sm"/></a>
         </div>
         <div>
-          <i nz-icon nzType="close-circle" class="text-error pr-sm"></i>您的账户还不具备申请资格
-          <a class="ml-md">立即升级<i nz-icon nzType="right" class="pl-sm"></i></a>
+          <nz-icon nzType="close-circle" class="text-error pr-sm"/>您的账户还不具备申请资格
+          <a class="ml-md">立即升级<nz-icon nzType="right" class="pl-sm"/></a>
         </div>
       </ng-template>
       <button nz-button [nzType]="'primary'">返回修改</button>

packages/abc/result/result.component.html

@@ -1,5 +1,5 @@
 <div class="result__icon">
-  <i nz-icon [nzType]="_icon" class="result__icon-{{ _type }}"></i>
+  <nz-icon [nzType]="_icon" class="result__icon-{{ _type }}" />
 </div>
 <div class="result__title">
   <ng-container *nzStringTemplateOutlet="title">{{ title }}</ng-container>

packages/abc/reuse-tab/reuse-tab.component.html

@@ -25,7 +25,7 @@
           </span>
         </div>
         @if (i.closable) {
-          <i nz-icon nzType="close" class="reuse-tab__op" (click)="_close($event, $index, false)"></i>
+          <nz-icon nzType="close" class="reuse-tab__op" (click)="_close($event, $index, false)" />
         }
       </ng-template>
     </nz-tab>

packages/abc/se/se.component.html

@@ -8,13 +8,12 @@
         <span class="se__label-optional" [class.se__label-optional-no-text]="!optional">
           <ng-container *nzStringTemplateOutlet="optional">{{ optional }}</ng-container>
           @if (optionalHelp) {
-            <i
+            <nz-icon
               nz-tooltip
               [nzTooltipTitle]="optionalHelp"
               [nzTooltipColor]="optionalHelpColor"
-              nz-icon
               nzType="question-circle"
-            ></i>
+            />
           }
         </span>
       }

packages/abc/st/demo/expand.md

@@ -36,7 +36,7 @@ import { NzIconDirective } from 'ng-zorro-antd/icon';
         {{ item.description }}
       </ng-template>
       <ng-template #expandIcon let-i let-index="index">
-        <span nz-icon [nzType]="i.expand ? 'up' : 'down'"></span>
+        <nz-icon [nzType]="i.expand ? 'up' : 'down'" />
       </ng-template>
     </st>
   `,

packages/abc/st/demo/render.md

@@ -43,7 +43,7 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
       <ng-template st-row="customTitle" type="title" let-c>
         {{ c.title.text }}
         <span nz-dropdown [nzDropdownMenu]="menuTpl" nzTrigger="click" [nzClickHide]="false" nzPlacement="bottomRight">
-          <i nz-icon nzType="down"></i>
+          <nz-icon nzType="down" />
         </span>
         <nz-dropdown-menu #menuTpl="nzDropdownMenu">
           <div class="ant-table-filter-dropdown p-sm">

packages/abc/st/st-filter.component.ts

@@ -38,7 +38,7 @@ import type { _STColumn } from './st.types';
       nzOverlayClassName="st__filter-wrap"
       (click)="stopPropagation($event)"
     >
-      <i nz-icon [nzType]="icon.type" [nzTheme]="icon.theme!"></i>
+      <nz-icon [nzType]="icon.type" [nzTheme]="icon.theme!" />
     </span>
     <nz-dropdown-menu #filterMenu="nzDropdownMenu">
       <div class="ant-table-filter-dropdown">

packages/abc/st/st-td.component.html

@@ -35,15 +35,9 @@
   @if (i._icon) {
     @let icon = i._icon;
     @if (icon.iconfont) {
-      <i nz-icon [nzIconfont]="icon.iconfont"></i>
+      <nz-icon [nzIconfont]="icon.iconfont" />
     } @else {
-      <i
-        nz-icon
-        [nzType]="icon.type"
-        [nzTheme]="icon.theme"
-        [nzSpin]="icon.spin"
-        [nzTwotoneColor]="icon.twoToneColor"
-      ></i>
+      <nz-icon [nzType]="icon.type" [nzTheme]="icon.theme" [nzSpin]="icon.spin" [nzTwotoneColor]="icon.twoToneColor" />
     }
   }
   <span [innerHTML]="i._text" [class.pl-xs]="i._icon"></span>
@@ -88,7 +82,7 @@
     @if (btn.children!.length > 0) {
       <a nz-dropdown [nzDropdownMenu]="btnMenu" nzOverlayClassName="st__btn-sub">
         <span [innerHTML]="btn._text"></span>
-        <i nz-icon nzType="down"></i>
+        <nz-icon nzType="down" />
       </a>
       <nz-dropdown-menu #btnMenu="nzDropdownMenu">
         <ul nz-menu>

packages/abc/st/st.component.html

@@ -4,7 +4,7 @@
     <small class="st__head-optional" [innerHTML]="i.optional"></small>
   }
   @if (i.optionalHelp) {
-    <i class="st__head-tip" nz-tooltip [nzTooltipTitle]="i.optionalHelp" nz-icon nzType="question-circle"></i>
+    <nz-icon class="st__head-tip" nz-tooltip [nzTooltipTitle]="i.optionalHelp" nzType="question-circle" />
   }
 </ng-template>
 <ng-template #chkAllTpl let-custom>
@@ -110,7 +110,7 @@
                               [nzDropdownMenu]="selectionMenu"
                               class="ant-table-selection-down st__checkall-selection"
                             >
-                              <i nz-icon nzType="down"></i>
+                              <nz-icon nzType="down" />
                             </div>
                           </div>
                         }

packages/abc/sv/sv.component.html

@@ -13,13 +13,12 @@
       <span class="sv__label-optional" [class.sv__label-optional-no-text]="!optional">
         <ng-container *nzStringTemplateOutlet="optional">{{ optional }}</ng-container>
         @if (optionalHelp) {
-          <i
+          <nz-icon
             nz-tooltip
             [nzTooltipTitle]="optionalHelp"
             [nzTooltipColor]="optionalHelpColor"
-            nz-icon
             nzType="question-circle"
-          ></i>
+          />
         }
       </span>
     }

packages/abc/tag-select/tag-select.component.html

@@ -2,6 +2,6 @@
 @if (expandable) {
   <a class="ant-tag ant-tag-checkable tag-select__trigger" (click)="trigger()">
     {{ expand ? locale.collapse : locale.expand }}
-    <i nz-icon nzType="down" [style.transform]="expand ? 'rotate(-180deg)' : null"></i>
+    <nz-icon nzType="down" [style.transform]="expand ? 'rotate(-180deg)' : null" />
   </a>
 }

packages/chart/card/demo/style1.md

@@ -26,7 +26,7 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
       [action]="action"
     >
       <ng-template #action>
-        <i nz-tooltip nzTooltipTitle="指标说明" nz-icon nzType="info-circle"></i>
+        <nz-icon nz-tooltip nzTooltipTitle="指标说明" nzType="info-circle" />
       </ng-template>
       周同比
       <trend flag="up" style="margin: 0 16px 0 8px; color: rgba(0,0,0,.85)">12%</trend>

packages/chart/card/demo/style2.md

@@ -27,7 +27,7 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
     >
       <ng-template #avatar><img style="width:56px; height: 56px" src="./assets/img/logo-color.svg" /></ng-template>
       <ng-template #action>
-        <i nz-tooltip nzTooltipTitle="指标说明" nz-icon nzType="info-circle"></i>
+        <nz-icon nz-tooltip nzTooltipTitle="指标说明" nzType="info-circle" />
       </ng-template>
     </g2-card>
   `,

packages/chart/card/demo/style3.md

@@ -20,7 +20,7 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
     <g2-card [title]="'移动指标'" [bordered]="true" [total]="'¥ 126,560.00'" [avatar]="avatar" [action]="action">
       <ng-template #avatar><img style="width:56px; height: 56px" src="./assets/img/logo-color.svg" /></ng-template>
       <ng-template #action>
-        <i nz-tooltip nzTooltipTitle="指标说明" nz-icon nzType="info-circle"></i>
+        <nz-icon nz-tooltip nzTooltipTitle="指标说明" nzType="info-circle" />
       </ng-template>
     </g2-card>
   `,

packages/chart/number-info/number-info.component.html

@@ -19,7 +19,7 @@
     <span class="number-info__value-text number-info__value-sub">
       <ng-container *nzStringTemplateOutlet="subTotal">{{ subTotal }}</ng-container>
       @if (status) {
-        <i nz-icon nzType="caret-{{ status }}"></i>
+        <nz-icon nzType="caret-{{ status }}" />
       }
     </span>
   }

packages/chart/trend/trend.component.ts

@@ -8,7 +8,7 @@ import { NzIconDirective } from 'ng-zorro-antd/icon';
   template: `
     <ng-content />
     @if (flag) {
-      <span class="trend__{{ flag }}"><i nz-icon nzType="caret-{{ flag }}"></i></span>
+      <span class="trend__{{ flag }}"><nz-icon nzType="caret-{{ flag }}" /></span>
     }
   `,
   host: {

packages/form/src/sf-item-wrap.component.html

@@ -17,7 +17,7 @@
             <span class="sf__optional">
               {{ ui.optional }}
               @if (oh) {
-                <i
+                <nz-icon
                   nz-tooltip
                   [nzTooltipTitle]="oh.text"
                   [nzTooltipPlacement]="oh.placement"
@@ -27,9 +27,8 @@
                   [nzTooltipOverlayStyle]="oh.overlayStyle"
                   [nzTooltipMouseEnterDelay]="oh.mouseEnterDelay"
                   [nzTooltipMouseLeaveDelay]="oh.mouseLeaveDelay"
-                  nz-icon
                   [nzType]="oh.icon!"
-                ></i>
+                />
               }
             </span>
           }

packages/form/src/sf.component.html

@@ -31,13 +31,12 @@
                   [disabled]="liveValidate && !valid"
                 >
                   @if (_btn.submit_icon) {
-                    <i
-                      nz-icon
+                    <nz-icon
                       [nzType]="_btn.submit_icon.type!"
                       [nzTheme]="_btn.submit_icon.theme!"
                       [nzTwotoneColor]="_btn.submit_icon.twoToneColor!"
                       [nzIconfont]="_btn.submit_icon.iconfont!"
-                    ></i>
+                    />
                   }
                   {{ _btn.submit }}
                 </button>
@@ -53,13 +52,12 @@
                   >
                     @let resetIcon = _btn.reset_icon;
                     @if (resetIcon) {
-                      <i
-                        nz-icon
+                      <nz-icon
                         [nzType]="resetIcon.type!"
                         [nzTheme]="resetIcon.theme!"
                         [nzTwotoneColor]="resetIcon.twoToneColor!"
                         [nzIconfont]="resetIcon.iconfont!"
-                      ></i>
+                      />
                     }
                     {{ _btn.reset }}
                   </button>