Skip to content

Commit 13d1869

Browse files
LafferyLaffery
authored
refactor(module:icon): migrate usage from [nz-icon] to nz-icon (#9019)
1 parent 85fb1fa commit 13d1869

28 files changed

+173
-211
lines changed

‎components/code-editor/demo/complex.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,13 @@ import { NzTypographyModule } from 'ng-zorro-antd/typography';
2525
[nzEditorOption]="{ language: 'javascript' }"
2626
></nz-code-editor>
2727
<ng-template #toolkit>
28-
<span
29-
nz-icon
28+
<nz-icon
3029
[class.active]="fullScreen"
3130
nz-tooltip
3231
nzTooltipTitle="Toggle Fullscreen"
3332
[nzType]="fullScreen ? 'fullscreen-exit' : 'fullscreen'"
3433
(click)="toggleFullScreen()"
35-
></span>
34+
/>
3635
</ng-template>
3736
`,
3837
styles: [

‎components/collapse/collapse-panel.component.ts

+1-6
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'collapsePanel';
4545
@if (nzShowArrow) {
4646
<div>
4747
<ng-container *nzStringTemplateOutlet="nzExpandedIcon; let expandedIcon">
48-
<span
49-
nz-icon
50-
[nzType]="expandedIcon || 'right'"
51-
class="ant-collapse-arrow"
52-
[nzRotate]="nzActive ? 90 : 0"
53-
></span>
48+
<nz-icon [nzType]="expandedIcon || 'right'" class="ant-collapse-arrow" [nzRotate]="nzActive ? 90 : 0" />
5449
</ng-container>
5550
</div>
5651
}

‎components/comment/demo/basic.ts

+4-6
Original file line numberDiff line numberDiff line change
@@ -24,25 +24,23 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
2424
</p>
2525
</nz-comment-content>
2626
<nz-comment-action>
27-
<span
27+
<nz-icon
2828
nz-tooltip
2929
nzTooltipTitle="Like"
30-
nz-icon
3130
nzType="like"
3231
[nzTheme]="likes > 0 ? 'twotone' : 'outline'"
3332
(click)="like()"
34-
></span>
33+
/>
3534
<span class="count like">{{ likes }}</span>
3635
</nz-comment-action>
3736
<nz-comment-action>
38-
<span
37+
<nz-icon
3938
nz-tooltip
4039
nzTooltipTitle="Dislike"
41-
nz-icon
4240
nzType="dislike"
4341
[nzTheme]="dislikes > 0 ? 'twotone' : 'outline'"
4442
(click)="dislike()"
45-
></span>
43+
/>
4644
<span class="count dislike">{{ dislikes }}</span>
4745
</nz-comment-action>
4846
<nz-comment-action>Reply to</nz-comment-action>

‎components/form/demo/dynamic-form-item.ts

+1-6
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,7 @@ import { NzInputModule } from 'ng-zorro-antd/input';
2929
[attr.id]="control.id"
3030
[formControlName]="control.controlInstance"
3131
/>
32-
<span
33-
nz-icon
34-
nzType="minus-circle-o"
35-
class="dynamic-delete-button"
36-
(click)="removeField(control, $event)"
37-
></span>
32+
<nz-icon nzType="minus-circle-o" class="dynamic-delete-button" (click)="removeField(control, $event)" />
3833
</nz-form-control>
3934
</nz-form-item>
4035
}

‎components/icon/demo/custom.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,4 @@ title:
1111

1212
## en-US
1313

14-
You can just put a `svg` element inside of a `nz-icon` to render custom content. We would take care of size and color things for you.
14+
You can just put a `svg` element inside a `nz-icon` to render custom content. We would take care of size and color for you.

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

+22-14
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
2121
### nz-icon, [nz-icon]
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,10 +32,10 @@ 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)` |
38-
| `fetchFromIconfont()` | To get icon assets from fonticon | `NzIconfontOption` |
38+
| `fetchFromIconfont()` | To get icon assets from iconfont | `NzIconfontOption` |
3939
| `changeAssetsSource()` | To change the location of your icon assets, so that you can deploy these icons wherever you want | `string` |
4040

4141
### SVG icons
@@ -49,16 +49,18 @@ We synced to Ant Design and replaced font icons with svg icons which bring benef
4949

5050
You can join in [this discussion of Ant Design](https://github.com/ant-design/ant-design/issues/10353).
5151

52-
NG-ZORRO hadn't provided an icon component. Instead, icon based on font files was provided. We make this new directive compatible to old API. If you make no changes to your existing code, old icons would be dynamically loaded as `outline`icons. But the best practice is always to use `nz-icon` directive and specify the `theme` prop.
52+
NG-ZORRO hadn't provided an icon component at the beginning. Instead, icon based on font files was provided.
53+
We make this new directive compatible to old API. If you make no changes to your existing code, old icons would be dynamically loaded as `outline`icons.
54+
But the best practice is always to use `nz-icon` component and specify the `theme` prop.
5355

5456
```html
55-
<span nz-icon [nzType]="'star'" [nzTheme]="'fill'"></span>
57+
<nz-icon nzType="star" nzTheme="fill" />
5658
```
5759

5860
All the icons will be rendered to `<svg>`, and styles and classes applied to `<i>` would work.
5961

6062
```html
61-
<span nz-icon [nzType]="'message'" style="font-size: 16px; color: #08c;"></span>
63+
<nz-icon nzType="message" style="font-size: 16px; color: #08c;" />
6264
```
6365

6466
### Static loading and dynamic loading
@@ -102,11 +104,15 @@ export const appConfig = {
102104
}
103105
```
104106

105-
Actually this calls `addIcon` of `NzIconService`. Icons imported would be bundled into your `.js` files. Static loading would increase your bundle's size so we recommend use dynamic importing as much as you can.
107+
Actually this calls `addIcon` of `NzIconService`. Icons imported would be bundled into your `.js` files. Static loading
108+
would increase your bundle's size so we recommend use dynamic importing as much as you can.
106109

107-
> Icons used by `NG-ZORRO` itself are imported statically to increase loading speed. However, icons demonstrated on the official website are loaded dynamically.
110+
> Icons used by `NG-ZORRO` itself are imported statically to increase loading speed. However, icons demonstrated on the
111+
> official website are loaded dynamically.
108112
109-
Dynamic importing. This way would not increase your bundle's size. When NG-ZORRO detects that the icon you want to render hasn't been registered, it would fire a HTTP request to load it. All you have to do is to config your `angular.json` like this:
113+
Dynamic importing. This way would not increase your bundle's size. When NG-ZORRO detects that the icon you want to
114+
render hasn't been registered, it would fire a HTTP request to load it. All you have to do is to config your
115+
`angular.json` like this:
110116

111117
```json
112118
{
@@ -120,9 +126,11 @@ Dynamic importing. This way would not increase your bundle's size. When NG-ZORRO
120126
}
121127
```
122128

123-
You can call `changeAssetsSource()` of `NzIconService` to change the location of your icon assets, so that you can deploy these icon assets to cdn. The parameter you passed would be add in front of `assets/`.
129+
You can call `changeAssetsSource()` of `NzIconService` to change the location of your icon assets, so that you can
130+
deploy these icon assets to cdn. The parameter you passed would be add in front of `assets/`.
124131

125-
Let's assume that you deploy static assets under `https://mycdn.somecdn.com/icons/assets`. You can call `changeAssetsSource('https://mycdn.somecdn.com/icons')` to tell NG-ZORRO that all your resources are located there.
132+
Let's assume that you deploy static assets under `https://mycdn.somecdn.com/icons/assets`. You can call
133+
`changeAssetsSource('https://mycdn.somecdn.com/icons')` to tell NG-ZORRO that all your resources are located there.
126134

127135
Please call this in component's constructor or `AppInitService`.
128136

@@ -134,7 +142,7 @@ Sometimes, you want to import icons in lazy modules to avoid increasing the size
134142
import { NzIconModule } from 'ng-zorro-antd/icon';
135143

136144
@NgModule({
137-
imports: [CommonModule, NzIconModule.forChild([QuestionOutline])]
145+
imports: [NzIconModule.forChild([QuestionOutline])]
138146
})
139147
class ChildModule {}
140148
```
@@ -178,15 +186,15 @@ this._iconService.fetchFromIconfont({
178186
```
179187

180188
```html
181-
<span nz-icon [nzIconfont]="'icon-tuichu'"></span>
189+
<nz-icon nzIconfont="icon-tuichu" />
182190
```
183191

184192
It creates a component that uses SVG sprites in essence.
185193

186194
The following option are available:
187195

188196
| Property | Description | Type | Default |
189-
| ----------- | ----------------------------------------- | -------- | ------- |
197+
|-------------|-------------------------------------------|----------|---------|
190198
| `scriptUrl` | The URL generated by iconfont.cn project. | `string` | - |
191199

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

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

+21-21
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,22 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
2121

2222
### nz-icon, [nz-icon]
2323

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

3333
### NzIconService
3434

35-
| 方法/属性 | 说明 | 参数 |
36-
| ---------------------- | ------------------------------------------------------------------------------------ | ------------------------ |
37-
| `addIcon()` | 用于静态引入图标，可传入多个值（或者用数组解构赋值） | `IconDefinition` |
38-
| `addIconLiteral()` | 用于静态引入用户自定义图标 | `string`, `string (SVG)` |
39-
| `fetchFromIconfont()` | 用于从 FontIcon 获取图标资源文件 | `NzIconfontOption` |
35+
| 方法/属性 | 说明 | 参数 |
36+
|------------------------|-------------------------------------------------|--------------------------|
37+
| `addIcon()` | 用于静态引入图标，可传入多个值（或者用数组解构赋值） | `IconDefinition` |
38+
| `addIconLiteral()` | 用于静态引入用户自定义图标 | `string`, `string (SVG)` |
39+
| `fetchFromIconfont()` | 用于从 IconFont 获取图标资源文件 | `NzIconfontOption` |
4040
| `changeAssetsSource()` | 用于修改动态加载 icon 的资源前缀，使得你可以部署图标资源到你想要的任何位置，例如 cdn | `string` |
4141

4242
### SVG 图标
@@ -50,16 +50,16 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
5050

5151
可参与 Ant Design 的相关讨论：[#10353](https://github.com/ant-design/ant-design/issues/10353)。
5252

53-
NG-ZORRO 之前并没有图标组件，而是提供了基于字体文件的解决方案。新版本中我们提供了旧 API 兼容，如果你不修改既有的代码，所有的图标都会被动态加载成 `outline` 主题的图标，而最佳实践是使用新的指令 `nz-icon` 并传入 `theme` 以明确图标的主题风格，例如：
53+
NG-ZORRO 之前并没有图标组件，而是提供了基于字体文件的解决方案。新版本中我们提供了旧 API 兼容，如果你不修改既有的代码，所有的图标都会被动态加载成 `outline` 主题的图标，而最佳实践是使用新的组件 `nz-icon` 并传入 `theme` 以明确图标的主题风格，例如：
5454

5555
```html
56-
<span nz-icon [nzType]="'star'" [nzTheme]="'fill'"></span>
56+
<nz-icon nzType="star" nzTheme="fill" />
5757
```
5858

5959
所有的图标都会以 `<svg>` 标签渲染，但是你还是可以用之前对 i 标签设置的样式和类来控制 svg 的样式，例如：
6060

6161
```html
62-
<span nz-icon [nzType]="'message'" style="font-size: 16px; color: #08c;"></span>
62+
<nz-icon nzType="message" style="font-size: 16px; color: #08c;" />
6363
```
6464

6565
### 静态加载与动态加载
@@ -133,7 +133,7 @@ export const appConfig = {
133133

134134
```typescript
135135
@NgModule({
136-
imports: [CommonModule, NzIconModule.forChild([QuestionOutline])]
136+
imports: [NzIconModule.forChild([QuestionOutline])]
137137
})
138138
class ChildModule {}
139139
```
@@ -177,16 +177,16 @@ this._iconService.fetchFromIconfont({
177177
```
178178

179179
```html
180-
<span nz-icon [nzIconfont]="'icon-tuichu'"></span>
180+
<nz-icon nzIconfont="icon-tuichu" />
181181
```
182182

183183
其本质上是创建了一个使用 `<use>` 标签渲染图标的组件。
184184

185185
`options` 的配置项如下：
186186

187-
| 参数 | 说明 | 类型 | 默认值 |
188-
| ----------- | ---------------------------------------------------------------------------------------------- | ------ | ------ |
189-
| `scriptUrl` | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | string | - |
187+
| 参数 | 说明 | 类型 | 默认值 |
188+
|-------------|----------------------------------------------------------------------------|--------|-----|
189+
| `scriptUrl` | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | string | - |
190190

191191
在 scriptUrl 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
192192

‎components/image/image-preview.component.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -87,13 +87,12 @@ const NZ_DEFAULT_ROTATE = 0;
8787
[class.ant-image-preview-operations-operation-disabled]="zoomOutDisabled && option.type === 'zoomOut'"
8888
(click)="option.onClick()"
8989
>
90-
<span
90+
<nz-icon
9191
class="ant-image-preview-operations-icon"
92-
nz-icon
9392
[nzType]="option.icon"
9493
[nzRotate]="option.rotate ?? 0"
9594
nzTheme="outline"
96-
></span>
95+
/>
9796
</li>
9897
}
9998
</ul>

‎components/input/demo/allow-clear.ts

+2-14
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,7 @@ import { NzInputModule } from 'ng-zorro-antd/input';
1313
</nz-input-group>
1414
<ng-template #inputClearTpl>
1515
@if (inputValue) {
16-
<span
17-
nz-icon
18-
class="ant-input-clear-icon"
19-
nzTheme="fill"
20-
nzType="close-circle"
21-
(click)="inputValue = null"
22-
></span>
16+
<nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" (click)="inputValue = null" />
2317
}
2418
</ng-template>
2519
<br />
@@ -29,13 +23,7 @@ import { NzInputModule } from 'ng-zorro-antd/input';
2923
</nz-input-group>
3024
<ng-template #textAreaClearTpl>
3125
@if (textValue) {
32-
<span
33-
nz-icon
34-
class="ant-input-clear-icon"
35-
nzTheme="fill"
36-
nzType="close-circle"
37-
(click)="textValue = null"
38-
></span>
26+
<nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" (click)="textValue = null" />
3927
}
4028
</ng-template>
4129
`

‎components/input/demo/password-input.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,11 @@ import { NzInputModule } from 'ng-zorro-antd/input';
1717
/>
1818
</nz-input-group>
1919
<ng-template #suffixTemplate>
20-
<span
21-
nz-icon
20+
<nz-icon
2221
class="ant-input-password-icon"
2322
[nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
2423
(click)="passwordVisible = !passwordVisible"
25-
></span>
24+
/>
2625
</ng-template>
2726
`
2827
})

‎components/layout/demo/custom-trigger.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,11 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
3434
</nz-sider>
3535
<nz-layout>
3636
<nz-header>
37-
<span
37+
<nz-icon
3838
class="trigger"
39-
nz-icon
4039
[nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
4140
(click)="isCollapsed = !isCollapsed"
42-
></span>
41+
/>
4342
</nz-header>
4443
<nz-content>
4544
<nz-breadcrumb>

0 commit comments

Comments
 (0)