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

Lines changed: 63 additions & 59 deletions

File tree

‎components/icon/demo/basic.md‎

Lines changed: 8 additions & 2 deletions
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‎

Lines changed: 7 additions & 7 deletions
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‎

Lines changed: 5 additions & 5 deletions
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‎

Lines changed: 4 additions & 4 deletions
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‎

Lines changed: 2 additions & 2 deletions
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‎

Lines changed: 4 additions & 4 deletions
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‎

Lines changed: 4 additions & 4 deletions
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‎

Lines changed: 3 additions & 3 deletions
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‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 11 additions & 11 deletions
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 {}

0 commit comments

Comments
 (0)