Skip to content

Commit 1406241

Browse files
HyperLife1119HyperLife1119
authored
feat(module:icon): support nz-icon tag selector (#8778)
1 parent 08f9142 commit 1406241

11 files changed

+63
-59
lines changed

‎components/icon/demo/basic.md

+8-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,14 @@ title:
77

88
## zh-CN
99

10-
使用 `<span ></span>` 标签声明组件，指定图标对应的 `nzType` 属性。可以通过 `nzTheme` 属性来设置不同的主题风格的图标，也可以通过设置 `nzSpin` 属性来实现动画旋转效果。对旧的 API `<i class="anticon"></i>` 兼容。
10+
使用 `<nz-icon>` 来声明组件。使用 `nzType` 属性指定对应的图标。
11+
可以通过 `nzTheme` 属性来设置不同的主题风格的图标，也可以通过设置 `nzSpin` 属性来实现动画旋转效果。
12+
13+
> `<nz-icon>` 自 v19 版本起受支持，而 `<span nz-icon>` 与 `<i nz-icon>` 仍受支持，但不再推荐。
1114
1215
## en-US
1316

14-
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>`
17+
Use `<nz-icon>` to declare the component. Use the `nzType` property to specify the corresponding icon.
18+
You can set different theme styles of icons by setting the `nzTheme` property, and you can achieve the animation rotation effect by setting the `nzSpin` property.
19+
20+
> `<nz-icon>` is supported since v19, while `<span nz-icon>` and `<i nz-icon>` are still supported but not recommended.

‎components/icon/demo/basic.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,18 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
88
imports: [NzIconModule],
99
template: `
1010
<div class="icons-list">
11-
<span nz-icon nzType="home"></span>
12-
<span nz-icon nzType="setting" nzTheme="fill"></span>
13-
<span nz-icon nzType="smile" nzTheme="outline"></span>
14-
<span nz-icon nzType="sync" [nzSpin]="true"></span>
15-
<span nz-icon nzType="smile" nzTheme="outline" [nzRotate]="180"></span>
11+
<nz-icon nzType="home" />
12+
<nz-icon nzType="setting" nzTheme="fill" />
13+
<nz-icon nzType="smile" nzTheme="outline" />
14+
<nz-icon nzType="sync" [nzSpin]="true" />
15+
<nz-icon nzType="smile" nzTheme="outline" [nzRotate]="180" />
1616
<!-- Loading with new API would spin automatically! -->
17-
<span nz-icon nzType="loading"></span>
17+
<nz-icon nzType="loading" />
1818
</div>
1919
`,
2020
styles: [
2121
`
22-
[nz-icon] {
22+
nz-icon {
2323
margin-right: 6px;
2424
font-size: 24px;
2525
}

‎components/icon/demo/custom.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
77
standalone: true,
88
imports: [NzIconModule],
99
template: `
10-
<span nz-icon style="color: hotpink">
10+
<nz-icon style="color: hotpink">
1111
<svg>
1212
<path
1313
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"
1414
/>
1515
</svg>
16-
</span>
17-
<span nz-icon style="font-size: 32px">
16+
</nz-icon>
17+
<nz-icon style="font-size: 32px">
1818
<svg>
1919
<path
2020
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';
5757
p-id="1150"
5858
/>
5959
</svg>
60-
</span>
60+
</nz-icon>
6161
`,
6262
styles: [
6363
`
64-
[nz-icon] {
64+
nz-icon {
6565
margin-right: 6px;
6666
font-size: 24px;
6767
}

‎components/icon/demo/iconfont.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import { NzIconModule, NzIconService } from 'ng-zorro-antd/icon';
77
standalone: true,
88
imports: [NzIconModule],
99
template: `
10-
<span nz-icon nzIconfont="icon-tuichu"></span>
11-
<span nz-icon nzIconfont="icon-facebook"></span>
12-
<span nz-icon nzIconfont="icon-twitter"></span>
10+
<nz-icon nzIconfont="icon-tuichu" />
11+
<nz-icon nzIconfont="icon-facebook" />
12+
<nz-icon nzIconfont="icon-twitter" />
1313
`,
1414
styles: [
1515
`
16-
[nz-icon] {
16+
nz-icon {
1717
margin-right: 6px;
1818
font-size: 24px;
1919
}

‎components/icon/demo/namespace.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ const ngZorroIconLiteral =
99
selector: 'nz-demo-icon-namespace',
1010
standalone: true,
1111
imports: [NzIconModule],
12-
template: `<span nz-icon nzType="ng-zorro:antd"></span>`,
12+
template: `<nz-icon nzType="ng-zorro:antd" />`,
1313
styles: [
1414
`
15-
[nz-icon] {
15+
nz-icon {
1616
margin-right: 6px;
1717
font-size: 24px;
1818
}

‎components/icon/demo/twotone.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
77
standalone: true,
88
imports: [NzIconModule],
99
template: `
10-
<span nz-icon nzType="smile" nzTheme="twotone"></span>
11-
<span nz-icon nzType="heart" nzTheme="twotone" nzTwotoneColor="#eb2f96"></span>
12-
<span nz-icon nzType="check-circle" nzTheme="twotone" nzTwotoneColor="#52c41a"></span>
10+
<nz-icon nzType="smile" nzTheme="twotone" />
11+
<nz-icon nzType="heart" nzTheme="twotone" nzTwotoneColor="#eb2f96" />
12+
<nz-icon nzType="check-circle" nzTheme="twotone" nzTwotoneColor="#52c41a" />
1313
`,
1414
styles: [
1515
`
16-
[nz-icon] {
16+
nz-icon {
1717
margin-right: 6px;
1818
font-size: 24px;
1919
}

‎components/icon/doc/index.en-US.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
1818

1919
## API
2020

21-
### [nz-icon]:standalone
21+
### nz-icon, [nz-icon]:standalone
2222

2323
| Property | Description | Type | Default | Global Config |
24-
|--------------------|-------------------------------------------------------------|--------------------------------|-------------|---------------|
24+
| ------------------ | ----------------------------------------------------------- | ------------------------------ | ----------- | ------------- |
2525
| `[nzType]` | Type of the ant design icon | `string` | - |
2626
| `[nzTheme]` | Type of the ant design icon | `'fill'\|'outline'\|'twotone'` | `'outline'` | ✅ |
2727
| `[nzSpin]` | Rotate icon with animation | `boolean` | `false` |
@@ -32,7 +32,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
3232
### NzIconService
3333

3434
| Methods/Properties | Description | Parameters |
35-
|------------------------|--------------------------------------------------------------------------------------------------|--------------------------|
35+
| ---------------------- | ------------------------------------------------------------------------------------------------ | ------------------------ |
3636
| `addIcon()` | To import icons statically | `IconDefinition` |
3737
| `addIconLiteral()` | To statically import custom icons | `string`, `string (SVG)` |
3838
| `fetchFromIconfont()` | To get icon assets from fonticon | `NzIconfontOption` |
@@ -186,7 +186,7 @@ It creates a component that uses SVG sprites in essence.
186186
The following option are available:
187187

188188
| Property | Description | Type | Default |
189-
|-------------|-------------------------------------------|----------|---------|
189+
| ----------- | ----------------------------------------- | -------- | ------- |
190190
| `scriptUrl` | The URL generated by iconfont.cn project. | `string` | - |
191191

192192
The property scriptUrl should be set to import the svg sprite symbols.

‎components/icon/doc/index.zh-CN.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
1919

2020
## API
2121

22-
### [nz-icon]:standalone
22+
### nz-icon, [nz-icon]:standalone
2323

2424
| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
2525
| ------------------ | -------------------------------------------------------------- | ------------------------------ | ----------- | ------------ |
2626
| `[nzType]` | 图标类型，遵循图标的命名规范 | string | - |
27-
| `[nzTheme]` | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 | `'fill'丨'outline'丨'twotone'` | `'outline'` | ✅ |
27+
| `[nzTheme]` | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 | `'fill'丨'outline'丨'twotone'` | `'outline'` | ✅ |
2828
| `[nzSpin]` | 是否有旋转动画 | `boolean` | `false` |
29-
| `[nzTwotoneColor]` | 仅适用双色图标，设置双色图标的主要颜色，默认为 Ant Design 蓝色 | `string (十六进制颜色)` | - | ✅ |
29+
| `[nzTwotoneColor]` | 仅适用双色图标，设置双色图标的主要颜色，默认为 Ant Design 蓝色 | `string (十六进制颜色)` | - | ✅ |
3030
| `[nzIconfont]` | 指定来自 IconFont 的图标类型 | string | - |
3131
| `[nzRotate]` | 图标旋转角度（7.0.0 开始支持） | `number` | - |
3232

‎components/icon/icon.directive.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { warn } from 'ng-zorro-antd/core/logger';
2929
import { NzIconPatchService, NzIconService } from './icon.service';
3030

3131
@Directive({
32-
selector: '[nz-icon]',
32+
selector: 'nz-icon,[nz-icon]',
3333
exportAs: 'nzIcon',
3434
host: {
3535
'[class.anticon]': 'true'

‎components/icon/icon.spec.ts

+11-11
Original file line numberDiff line numberDiff line change
@@ -219,8 +219,8 @@ describe('nz-icon injection', () => {
219219
standalone: true,
220220
imports: [NzIconModule],
221221
template: `
222-
<span nz-icon [nzType]="type" [nzTheme]="theme" [nzSpin]="spin" [nzRotate]="rotate"></span>
223-
<span nz-icon [nzType]="'loading'" [nzTheme]="theme"></span>
222+
<nz-icon [nzType]="type" [nzTheme]="theme" [nzSpin]="spin" [nzRotate]="rotate"></nz-icon>
223+
<nz-icon [nzType]="'loading'" [nzTheme]="theme"></nz-icon>
224224
`
225225
})
226226
export class NzTestIconExtensionsComponent {
@@ -236,13 +236,13 @@ export class NzTestIconExtensionsComponent {
236236
standalone: true,
237237
imports: [NzIconModule],
238238
template: `
239-
<span nz-icon style="color: hotpink;">
239+
<nz-icon style="color: hotpink;">
240240
<svg>
241241
<path
242242
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"
243243
/>
244244
</svg>
245-
</span>
245+
</nz-icon>
246246
`
247247
})
248248
export class NzTestIconCustomComponent {}
@@ -251,9 +251,9 @@ export class NzTestIconCustomComponent {}
251251
standalone: true,
252252
imports: [NzIconModule],
253253
template: `
254-
<span nz-icon nzIconfont="icon-tuichu"></span>
255-
<span nz-icon nzIconfont="icon-facebook"></span>
256-
<span nz-icon nzIconfont="icon-twitter"></span>
254+
<nz-icon nzIconfont="icon-tuichu"></nz-icon>
255+
<nz-icon nzIconfont="icon-facebook"></nz-icon>
256+
<nz-icon nzIconfont="icon-twitter"></nz-icon>
257257
`
258258
})
259259
export class NzTestIconIconfontComponent {
@@ -273,8 +273,8 @@ class ChildModule {}
273273
standalone: true,
274274
imports: [NzIconModule, ChildModule],
275275
template: `
276-
<span nz-icon nzType="home"></span>
277-
<span nz-icon nzType="question"></span>
276+
<nz-icon nzType="home"></nz-icon>
277+
<nz-icon nzType="question"></nz-icon>
278278
`
279279
})
280280
class NzTestIconMultiInjectionComponent {}
@@ -284,8 +284,8 @@ class NzTestIconMultiInjectionComponent {}
284284
imports: [NzIconModule],
285285
providers: [provideNzIconsPatch([QuestionOutline])],
286286
template: `
287-
<span nz-icon nzType="home"></span>
288-
<span nz-icon nzType="question"></span>
287+
<nz-icon nzType="home"></nz-icon>
288+
<nz-icon nzType="question"></nz-icon>
289289
`
290290
})
291291
class NzTestIconMultiInjectionStandaloneComponent {}

‎components/icon/page/index.ts

+14-16
Original file line numberDiff line numberDiff line change
@@ -335,33 +335,33 @@ declare const locale: NzSafeAny;
335335
<div class="icon-selector">
336336
<nz-radio-group [ngModel]="currentTheme" (ngModelChange)="setIconsShouldBeDisplayed($event)">
337337
<label nz-radio-button nzValue="outline">
338-
<span nz-icon>
338+
<nz-icon>
339339
<svg>
340340
<path
341341
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"
342342
></path>
343343
</svg>
344-
</span>
344+
</nz-icon>
345345
Outlined
346346
</label>
347347
<label nz-radio-button nzValue="fill">
348-
<span nz-icon>
348+
<nz-icon>
349349
<svg>
350350
<path
351351
d="M864 64H160C107 64 64 107 64 160v704c0 53 43 96 96 96h704c53 0 96-43 96-96V160c0-53-43-96-96-96z"
352352
></path>
353353
</svg>
354-
</span>
354+
</nz-icon>
355355
Filled
356356
</label>
357357
<label nz-radio-button nzValue="twotone">
358-
<span nz-icon>
358+
<nz-icon>
359359
<svg>
360360
<path
361361
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"
362362
></path>
363363
</svg>
364-
</span>
364+
</nz-icon>
365365
Two Tone
366366
</label>
367367
</nz-radio-group>
@@ -375,9 +375,8 @@ declare const locale: NzSafeAny;
375375
</nz-input-group>
376376
<ng-template #suffixIconCamera>
377377
<div class="icon-pic-searcher">
378-
<span
378+
<nz-icon
379379
class="icon-pic-btn"
380-
nz-icon
381380
nz-popover
382381
[nzPopoverTrigger]="null"
383382
[(nzPopoverVisible)]="popoverVisible"
@@ -389,12 +388,12 @@ declare const locale: NzSafeAny;
389388
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"
390389
></path>
391390
</svg>
392-
</span>
391+
</nz-icon>
393392
</div>
394393
</ng-template>
395394
<ng-template #addOnAfterIconSearch>
396395
<button nz-button nzType="default" nzSearch>
397-
<span nz-icon nzType="search"></span>
396+
<nz-icon nzType="search"></nz-icon>
398397
</button>
399398
</ng-template>
400399
</div>
@@ -403,7 +402,7 @@ declare const locale: NzSafeAny;
403402
<ul class="anticons-list">
404403
@for (icon of displayedNames[i].icons; track trackByFn(icon)) {
405404
<li (click)="onIconClick($event, icon)">
406-
<span nz-icon [nzType]="kebabCase(icon)" [nzTheme]="currentTheme"></span>
405+
<nz-icon [nzType]="kebabCase(icon)" [nzTheme]="currentTheme"></nz-icon>
407406
<span class="anticon-class">
408407
@if (isNewIcon(icon)) {
409408
<nz-badge nzDot>
@@ -434,7 +433,7 @@ declare const locale: NzSafeAny;
434433
[nzShowUploadList]="{ showPreviewIcon: false, showRemoveIcon: false }"
435434
>
436435
<p class="ant-upload-drag-icon">
437-
<span nz-icon nzType="inbox" nzTheme="outline"></span>
436+
<nz-icon nzType="inbox" nzTheme="outline"></nz-icon>
438437
</p>
439438
<p class="ant-upload-text">{{ localeObj.picSearcherUploadText }}</p>
440439
<p class="ant-upload-hint">{{ localeObj.picSearcherUploadHint }}</p>
@@ -458,16 +457,15 @@ declare const locale: NzSafeAny;
458457
@for (icon of icons; track icon) {
459458
<tr>
460459
<td class="col-icon">
461-
<span
462-
nz-icon
460+
<nz-icon
463461
nz-tooltip
464462
[nzTooltipTitle]="icon.type"
465463
nzTooltipPlacement="right"
466464
[nzType]="icon.type"
467465
[nzTheme]="currentTheme"
468466
(click)="onIconClick($event, icon.type)"
469467
>
470-
</span>
468+
</nz-icon>
471469
</td>
472470
<td>
473471
<nz-progress nzStrokeLinecap="round" [nzPercent]="icon.score"></nz-progress>
@@ -538,7 +536,7 @@ export class NzPageDemoIconComponent implements OnInit, OnDestroy {
538536

539537
onIconClick(e: MouseEvent, icon: string): void {
540538
const target = e.target as HTMLElement;
541-
const copiedString = `<span nz-icon nzType="${kebabCase(icon)}" nzTheme="${this.currentTheme}"></span>`;
539+
const copiedString = `<nz-icon nzType="${kebabCase(icon)}" nzTheme="${this.currentTheme}" />`;
542540
target.classList.add('copied');
543541
this._copy(copiedString).then(() => {
544542
setTimeout(() => {

0 commit comments

Comments
 (0)