Skip to content

Commit b0dbfbc

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:icon): support standalone component (#8248)
1 parent 15636d2 commit b0dbfbc

4 files changed

Lines changed: 43 additions & 45 deletions

File tree

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

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,25 +18,25 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
1818

1919
## API
2020

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

23-
| Property | Description | Type | Default | Global Config |
24-
| --- | --- | --- | --- | --- |
25-
| `[nzType]` | Type of the ant design icon | `string` | - |
26-
| `[nzTheme]` | Type of the ant design icon | `'fill'\|'outline'\|'twotone'` | `'outline'` | ✅ |
27-
| `[nzSpin]` | Rotate icon with animation | `boolean` | `false` |
28-
| `[nzTwotoneColor]` | Only support the two-tone icon. Specific the primary color. | `string (hex color)` | - | ✅ |
29-
| `[nzIconfont]` | Type of the icon from iconfont | `string` | - |
30-
| `[nzRotate]` | Rotate degrees | `number` | - |
23+
| Property | Description | Type | Default | Global Config |
24+
| ------------------ | ----------------------------------------------------------- | ------------------------------ | ----------- | ------------- |
25+
| `[nzType]` | Type of the ant design icon | `string` | - |
26+
| `[nzTheme]` | Type of the ant design icon | `'fill'\|'outline'\|'twotone'` | `'outline'` | ✅ |
27+
| `[nzSpin]` | Rotate icon with animation | `boolean` | `false` |
28+
| `[nzTwotoneColor]` | Only support the two-tone icon. Specific the primary color. | `string (hex color)` | - | ✅ |
29+
| `[nzIconfont]` | Type of the icon from iconfont | `string` | - |
30+
| `[nzRotate]` | Rotate degrees | `number` | - |
3131

3232
### NzIconService
3333

34-
| Methods/Properties | Description | Parameters |
35-
| --- | --- | --- |
36-
| `addIcon()` | To import icons statically | `IconDefinition` |
37-
| `addIconLiteral()` | To statically import custom icons | `string`, `string (SVG)` |
38-
| `fetchFromIconfont()` | To get icon assets from fonticon | `NzIconfontOption` |
39-
| `changeAssetsSource()` | To change the location of your icon assets, so that you can deploy these icons wherever you want | `string` |
34+
| Methods/Properties | Description | Parameters |
35+
| ---------------------- | ------------------------------------------------------------------------------------------------ | ------------------------ |
36+
| `addIcon()` | To import icons statically | `IconDefinition` |
37+
| `addIconLiteral()` | To statically import custom icons | `string`, `string (SVG)` |
38+
| `fetchFromIconfont()` | To get icon assets from fonticon | `NzIconfontOption` |
39+
| `changeAssetsSource()` | To change the location of your icon assets, so that you can deploy these icons wherever you want | `string` |
4040

4141
### SVG icons
4242

@@ -127,7 +127,7 @@ Sometimes, you want to import icons in lazy modules to avoid increasing the size
127127

128128
```ts
129129
@NgModule({
130-
imports: [CommonModule, NzIconModule.forChild([QuestionOutline])],
130+
imports: [CommonModule, NzIconModule.forChild([QuestionOutline])]
131131
})
132132
class ChildModule {}
133133
```
@@ -158,9 +158,9 @@ It create a component that uses SVG sprites in essence.
158158

159159
The following option are available:
160160

161-
| Property | Description | Type | Default |
162-
| --- | --- | --- | --- |
163-
| `scriptUrl` | The URL generated by iconfont.cn project. | `string` | - |
161+
| Property | Description | Type | Default |
162+
| ----------- | ----------------------------------------- | -------- | ------- |
163+
| `scriptUrl` | The URL generated by iconfont.cn project. | `string` | - |
164164

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

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

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/rrwbSt3FQ/Icon.svg
99

1010
语义化的矢量图形。
1111

12-
1312
## 图标列表
1413

1514
新版图标可能略有缺失，我们将与 [Ant Design](https://ant.design/components/icon-cn/) 同步保持图标的更新。
@@ -20,25 +19,25 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
2019

2120
## API
2221

23-
### [nz-icon]
22+
### [nz-icon]:standalone
2423

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

3433
### NzIconService
3534

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

4342
### SVG 图标
4443

@@ -129,7 +128,7 @@ export class AppModule {
129128

130129
```ts
131130
@NgModule({
132-
imports: [CommonModule, NzIconModule.forChild([QuestionOutline])],
131+
imports: [CommonModule, NzIconModule.forChild([QuestionOutline])]
133132
})
134133
class ChildModule {}
135134
```
@@ -160,9 +159,9 @@ this._iconService.fetchFromIconfont({
160159

161160
`options` 的配置项如下：
162161

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

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

‎components/icon/icon.directive.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@ import { NzIconPatchService, NzIconService } from './icon.service';
3333
exportAs: 'nzIcon',
3434
host: {
3535
'[class.anticon]': 'true'
36-
}
36+
},
37+
standalone: true
3738
})
3839
export class NzIconDirective extends IconDirective implements OnInit, OnChanges, AfterContentChecked, OnDestroy {
3940
static ngAcceptInputType_nzSpin: BooleanInput;

‎components/icon/icon.module.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,16 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { PlatformModule } from '@angular/cdk/platform';
76
import { ModuleWithProviders, NgModule } from '@angular/core';
87

98
import { IconDefinition } from '@ant-design/icons-angular';
109

1110
import { NzIconDirective } from './icon.directive';
12-
import { NzIconPatchService, NZ_ICONS, NZ_ICONS_PATCH } from './icon.service';
11+
import { NZ_ICONS, NZ_ICONS_PATCH, NzIconPatchService } from './icon.service';
1312

1413
@NgModule({
15-
exports: [NzIconDirective],
16-
declarations: [NzIconDirective],
17-
imports: [PlatformModule]
14+
imports: [NzIconDirective],
15+
exports: [NzIconDirective]
1816
})
1917
export class NzIconModule {
2018
static forRoot(icons: IconDefinition[]): ModuleWithProviders<NzIconModule> {

0 commit comments

Comments
 (0)