feat(module:icon): support nz-icon tag selector

NG-ZORRO · Sep 21, 2024 · fd980e8 · fd980e8
1 parent c64e1a1
commit fd980e8
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 48 deletions.
diff --git a/components/icon/demo/basic.md b/components/icon/demo/basic.md
@@ -7,8 +7,12 @@ title:
 
 ## zh-CN
 
-使用 `<span ></span>` 标签声明组件，指定图标对应的 `nzType` 属性。可以通过 `nzTheme` 属性来设置不同的主题风格的图标，也可以通过设置 `nzSpin` 属性来实现动画旋转效果。对旧的 API `<i class="anticon"></i>` 兼容。
+推荐使用 `<nz-icon>` 而不是 `<span>` 标签来声明组件。
+
+使用 `nzType` 属性指定对应的图标。可以通过 `nzTheme` 属性来设置不同的主题风格的图标，也可以通过设置 `nzSpin` 属性来实现动画旋转效果。
 
 ## en-US
 
-Use `<span ></span>` 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>`
+It is recommended to use `<nz-icon>` instead of `<span>` to declare the component.
+
+Use the `nzType` property to specify the corresponding icon. You can set different theme styles of icons through the `nzTheme` property, and you can achieve the animation rotation effect by setting the `nzSpin` property.
diff --git a/components/icon/demo/basic.ts b/components/icon/demo/basic.ts
@@ -8,18 +8,18 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
   imports: [NzIconModule],
   template: `
     <div class="icons-list">
-      <span nz-icon nzType="home"></span>
-      <span nz-icon nzType="setting" nzTheme="fill"></span>
-      <span nz-icon nzType="smile" nzTheme="outline"></span>
-      <span nz-icon nzType="sync" [nzSpin]="true"></span>
-      <span nz-icon nzType="smile" nzTheme="outline" [nzRotate]="180"></span>
+      <nz-icon nzType="home"></nz-icon>
+      <nz-icon nzType="setting" nzTheme="fill"></nz-icon>
+      <nz-icon nzType="smile" nzTheme="outline"></nz-icon>
+      <nz-icon nzType="sync" [nzSpin]="true"></nz-icon>
+      <nz-icon nzType="smile" nzTheme="outline" [nzRotate]="180"></nz-icon>
       <!-- Loading with new API would spin automatically! -->
-      <span nz-icon nzType="loading"></span>
+      <nz-icon nzType="loading"></nz-icon>
     </div>
   `,
   styles: [
     `
-      [nz-icon] {
+      nz-icon {
         margin-right: 6px;
         font-size: 24px;
       }

diff --git a/components/icon/demo/custom.ts b/components/icon/demo/custom.ts
@@ -7,14 +7,14 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
   standalone: true,
   imports: [NzIconModule],
   template: `
-    <span nz-icon style="color: hotpink">
+    <nz-icon style="color: hotpink">
       <svg>
         <path
           d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z"
         />
       </svg>
-    </span>
-    <span nz-icon style="font-size: 32px">
+    </nz-icon>
+    <nz-icon style="font-size: 32px">
       <svg>
         <path
           d="M99.096 315.634s-82.58-64.032-82.58-132.13c0-66.064 33.032-165.162 148.646-148.646 83.37 11.91 99.096 165.162 99.096 165.162l-165.162 115.614zM924.906 315.634s82.58-64.032 82.58-132.13c0-66.064-33.032-165.162-148.646-148.646-83.37 11.91-99.096 165.162-99.096 165.162l165.162 115.614z"
@@ -57,11 +57,11 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
           p-id="1150"
         />
       </svg>
-    </span>
+    </nz-icon>
   `,
   styles: [
     `
-      [nz-icon] {
+      nz-icon {
         margin-right: 6px;
         font-size: 24px;
       }

diff --git a/components/icon/demo/iconfont.ts b/components/icon/demo/iconfont.ts
@@ -7,13 +7,13 @@ import { NzIconModule, NzIconService } from 'ng-zorro-antd/icon';
   standalone: true,
   imports: [NzIconModule],
   template: `
-    <span nz-icon nzIconfont="icon-tuichu"></span>
-    <span nz-icon nzIconfont="icon-facebook"></span>
-    <span nz-icon nzIconfont="icon-twitter"></span>
+    <nz-icon nzIconfont="icon-tuichu"></nz-icon>
+    <nz-icon nzIconfont="icon-facebook"></nz-icon>
+    <nz-icon nzIconfont="icon-twitter"></nz-icon>
   `,
   styles: [
     `
-      [nz-icon] {
+      nz-icon {
         margin-right: 6px;
         font-size: 24px;
       }

diff --git a/components/icon/demo/namespace.ts b/components/icon/demo/namespace.ts
@@ -9,10 +9,10 @@ const ngZorroIconLiteral =
   selector: 'nz-demo-icon-namespace',
   standalone: true,
   imports: [NzIconModule],
-  template: `<span nz-icon nzType="ng-zorro:antd"></span>`,
+  template: `<nz-icon nzType="ng-zorro:antd"></nz-icon>`,
   styles: [
     `
-      [nz-icon] {
+      nz-icon {
         margin-right: 6px;
         font-size: 24px;
       }

diff --git a/components/icon/demo/twotone.ts b/components/icon/demo/twotone.ts
@@ -7,13 +7,13 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
   standalone: true,
   imports: [NzIconModule],
   template: `
-    <span nz-icon nzType="smile" nzTheme="twotone"></span>
-    <span nz-icon nzType="heart" nzTheme="twotone" nzTwotoneColor="#eb2f96"></span>
-    <span nz-icon nzType="check-circle" nzTheme="twotone" nzTwotoneColor="#52c41a"></span>
+    <nz-icon nzType="smile" nzTheme="twotone"></nz-icon>
+    <nz-icon nzType="heart" nzTheme="twotone" nzTwotoneColor="#eb2f96"></nz-icon>
+    <nz-icon nzType="check-circle" nzTheme="twotone" nzTwotoneColor="#52c41a"></nz-icon>
   `,
   styles: [
     `
-      [nz-icon] {
+      nz-icon {
         margin-right: 6px;
         font-size: 24px;
       }

diff --git a/components/icon/doc/index.en-US.md b/components/icon/doc/index.en-US.md
@@ -18,10 +18,10 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 
 ## API
 
-### [nz-icon]:standalone
+### nz-icon, [nz-icon]:standalone
 
 | Property           | Description                                                 | Type                           | Default     | Global Config |
-|--------------------|-------------------------------------------------------------|--------------------------------|-------------|---------------|
+| ------------------ | ----------------------------------------------------------- | ------------------------------ | ----------- | ------------- |
 | `[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`     |
@@ -32,7 +32,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 ### NzIconService
 
 | Methods/Properties     | Description                                                                                      | Parameters               |
-|------------------------|--------------------------------------------------------------------------------------------------|--------------------------|
+| ---------------------- | ------------------------------------------------------------------------------------------------ | ------------------------ |
 | `addIcon()`            | To import icons statically                                                                       | `IconDefinition`         |
 | `addIconLiteral()`     | To statically import custom icons                                                                | `string`, `string (SVG)` |
 | `fetchFromIconfont()`  | To get icon assets from fonticon                                                                 | `NzIconfontOption`       |
@@ -186,7 +186,7 @@ It creates a component that uses SVG sprites in essence.
 The following option are available:
 
 | Property    | Description                               | Type     | Default |
-|-------------|-------------------------------------------|----------|---------|
+| ----------- | ----------------------------------------- | -------- | ------- |
 | `scriptUrl` | The URL generated by iconfont.cn project. | `string` | -       |
 
 The property scriptUrl should be set to import the svg sprite symbols.

diff --git a/components/icon/doc/index.zh-CN.md b/components/icon/doc/index.zh-CN.md
@@ -19,14 +19,14 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 
 ## API
 
-### [nz-icon]:standalone
+### nz-icon, [nz-icon]:standalone
 
 | 参数               | 说明                                                           | 类型                           | 默认值      | 支持全局配置 |
 | ------------------ | -------------------------------------------------------------- | ------------------------------ | ----------- | ------------ |
 | `[nzType]`         | 图标类型，遵循图标的命名规范                                   | string                         | -           |
-| `[nzTheme]`        | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标   | `'fill'丨'outline'丨'twotone'` | `'outline'` | ✅           |
+| `[nzTheme]`        | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标   | `'fill'丨'outline'丨'twotone'` | `'outline'` | ✅            |
 | `[nzSpin]`         | 是否有旋转动画                                                 | `boolean`                      | `false`     |
-| `[nzTwotoneColor]` | 仅适用双色图标，设置双色图标的主要颜色，默认为 Ant Design 蓝色 | `string (十六进制颜色)`        | -           | ✅           |
+| `[nzTwotoneColor]` | 仅适用双色图标，设置双色图标的主要颜色，默认为 Ant Design 蓝色 | `string (十六进制颜色)`        | -           | ✅            |
 | `[nzIconfont]`     | 指定来自 IconFont 的图标类型                                   | string                         | -           |
 | `[nzRotate]`       | 图标旋转角度（7.0.0 开始支持）                                 | `number`                       | -           |
 

diff --git a/components/icon/icon.directive.ts b/components/icon/icon.directive.ts
@@ -29,7 +29,7 @@ import { warn } from 'ng-zorro-antd/core/logger';
 import { NzIconPatchService, NzIconService } from './icon.service';
 
 @Directive({
-  selector: '[nz-icon]',
+  selector: 'nz-icon,[nz-icon]',
   exportAs: 'nzIcon',
   host: {
     '[class.anticon]': 'true'

diff --git a/components/icon/page/index.ts b/components/icon/page/index.ts
@@ -335,33 +335,33 @@ declare const locale: NzSafeAny;
     <div class="icon-selector">
       <nz-radio-group [ngModel]="currentTheme" (ngModelChange)="setIconsShouldBeDisplayed($event)">
         <label nz-radio-button nzValue="outline">
-          <span nz-icon>
+          <nz-icon>
             <svg>
               <path
                 d="M864 64H160C107 64 64 107 64 160v704c0 53 43 96 96 96h704c53 0 96-43 96-96V160c0-53-43-96-96-96z m-12 800H172c-6.6 0-12-5.4-12-12V172c0-6.6 5.4-12 12-12h680c6.6 0 12 5.4 12 12v680c0 6.6-5.4 12-12 12z"
               ></path>
             </svg>
-          </span>
+          </nz-icon>
           Outlined
         </label>
         <label nz-radio-button nzValue="fill">
-          <span nz-icon>
+          <nz-icon>
             <svg>
               <path
                 d="M864 64H160C107 64 64 107 64 160v704c0 53 43 96 96 96h704c53 0 96-43 96-96V160c0-53-43-96-96-96z"
               ></path>
             </svg>
-          </span>
+          </nz-icon>
           Filled
         </label>
         <label nz-radio-button nzValue="twotone">
-          <span nz-icon>
+          <nz-icon>
             <svg>
               <path
                 d="M16 512c0 273.932 222.066 496 496 496s496-222.068 496-496S785.932 16 512 16 16 238.066 16 512z m496 368V144c203.41 0 368 164.622 368 368 0 203.41-164.622 368-368 368z"
               ></path>
             </svg>
-          </span>
+          </nz-icon>
           Two Tone
         </label>
       </nz-radio-group>
@@ -375,9 +375,8 @@ declare const locale: NzSafeAny;
       </nz-input-group>
       <ng-template #suffixIconCamera>
         <div class="icon-pic-searcher">
-          <span
+          <nz-icon
             class="icon-pic-btn"
-            nz-icon
             nz-popover
             [nzPopoverTrigger]="null"
             [(nzPopoverVisible)]="popoverVisible"
@@ -389,12 +388,12 @@ declare const locale: NzSafeAny;
                 d="M864 248H728l-32.4-90.8a32.07 32.07 0 00-30.2-21.2H358.6c-13.5 0-25.6 8.5-30.1 21.2L296 248H160c-44.2 0-80 35.8-80 80v456c0 44.2 35.8 80 80 80h704c44.2 0 80-35.8 80-80V328c0-44.2-35.8-80-80-80zm8 536c0 4.4-3.6 8-8 8H160c-4.4 0-8-3.6-8-8V328c0-4.4 3.6-8 8-8h186.7l17.1-47.8 22.9-64.2h250.5l22.9 64.2 17.1 47.8H864c4.4 0 8 3.6 8 8v456zM512 384c-88.4 0-160 71.6-160 160s71.6 160 160 160 160-71.6 160-160-71.6-160-160-160zm0 256c-53 0-96-43-96-96s43-96 96-96 96 43 96 96-43 96-96 96z"
               ></path>
             </svg>
-          </span>
+          </nz-icon>
         </div>
       </ng-template>
       <ng-template #addOnAfterIconSearch>
         <button nz-button nzType="default" nzSearch>
-          <span nz-icon nzType="search"></span>
+          <nz-icon nzType="search"></nz-icon>
         </button>
       </ng-template>
     </div>
@@ -403,7 +402,7 @@ declare const locale: NzSafeAny;
       <ul class="anticons-list">
         @for (icon of displayedNames[i].icons; track trackByFn(icon)) {
           <li (click)="onIconClick($event, icon)">
-            <span nz-icon [nzType]="kebabCase(icon)" [nzTheme]="currentTheme"></span>
+            <nz-icon [nzType]="kebabCase(icon)" [nzTheme]="currentTheme"></nz-icon>
             <span class="anticon-class">
               @if (isNewIcon(icon)) {
                 <nz-badge nzDot>
@@ -434,7 +433,7 @@ declare const locale: NzSafeAny;
             [nzShowUploadList]="{ showPreviewIcon: false, showRemoveIcon: false }"
           >
             <p class="ant-upload-drag-icon">
-              <span nz-icon nzType="inbox" nzTheme="outline"></span>
+              <nz-icon nzType="inbox" nzTheme="outline"></nz-icon>
             </p>
             <p class="ant-upload-text">{{ localeObj.picSearcherUploadText }}</p>
             <p class="ant-upload-hint">{{ localeObj.picSearcherUploadHint }}</p>
@@ -458,16 +457,15 @@ declare const locale: NzSafeAny;
                     @for (icon of icons; track icon) {
                       <tr>
                         <td class="col-icon">
-                          <span
-                            nz-icon
+                          <nz-icon
                             nz-tooltip
                             [nzTooltipTitle]="icon.type"
                             nzTooltipPlacement="right"
                             [nzType]="icon.type"
                             [nzTheme]="currentTheme"
                             (click)="onIconClick($event, icon.type)"
                           >
-                          </span>
+                          </nz-icon>
                         </td>
                         <td>
                           <nz-progress nzStrokeLinecap="round" [nzPercent]="icon.score"></nz-progress>
@@ -538,7 +536,7 @@ export class NzPageDemoIconComponent implements OnInit, OnDestroy {
 
   onIconClick(e: MouseEvent, icon: string): void {
     const target = e.target as HTMLElement;
-    const copiedString = `<span nz-icon nzType="${kebabCase(icon)}" nzTheme="${this.currentTheme}"></span>`;
+    const copiedString = `<nz-icon nzType="${kebabCase(icon)}" nzTheme="${this.currentTheme}" />`;
     target.classList.add('copied');
     this._copy(copiedString).then(() => {
       setTimeout(() => {