From fd980e803ff8ad0f50040510513a89b0656a4d46 Mon Sep 17 00:00:00 2001 From: hyperlife1119 Date: Sat, 21 Sep 2024 19:11:22 +0800 Subject: [PATCH] feat(module:icon): support nz-icon tag selector --- components/icon/demo/basic.md | 8 ++++++-- components/icon/demo/basic.ts | 14 +++++++------- components/icon/demo/custom.ts | 10 +++++----- components/icon/demo/iconfont.ts | 8 ++++---- components/icon/demo/namespace.ts | 4 ++-- components/icon/demo/twotone.ts | 8 ++++---- components/icon/doc/index.en-US.md | 8 ++++---- components/icon/doc/index.zh-CN.md | 6 +++--- components/icon/icon.directive.ts | 2 +- components/icon/page/index.ts | 30 ++++++++++++++---------------- 10 files changed, 50 insertions(+), 48 deletions(-) diff --git a/components/icon/demo/basic.md b/components/icon/demo/basic.md index 7032ed5bc7f..6c310b8cc61 100644 --- a/components/icon/demo/basic.md +++ b/components/icon/demo/basic.md @@ -7,8 +7,12 @@ title: ## zh-CN -使用 `` 标签声明组件，指定图标对应的 `nzType` 属性。可以通过 `nzTheme` 属性来设置不同的主题风格的图标，也可以通过设置 `nzSpin` 属性来实现动画旋转效果。对旧的 API `` 兼容。 +推荐使用 `` 而不是 `` 标签来声明组件。 + +使用 `nzType` 属性指定对应的图标。可以通过 `nzTheme` 属性来设置不同的主题风格的图标，也可以通过设置 `nzSpin` 属性来实现动画旋转效果。 ## en-US -Use `` 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 `` +It is recommended to use `` instead of `` 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 index 3f4088570a1..cc1a8d86d36 100644 --- 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: `
- - - - - + + + + + - +
`, 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 index 6ebf76ce6d1..e1cbef3823b 100644 --- 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: ` - + - - + + - + `, 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 index 8a052fb37fb..4081a56b4e4 100644 --- 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: ` - - - + + + `, 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 index a50e2704855..74bd06dcdb9 100644 --- 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: ``, + template: ``, 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 index 11255586e9d..3d5b8e8a6ce 100644 --- 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: ` - - - + + + `, 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 index 529bc8fb34f..7ea43c49275 100755 --- 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 index b15f8c3d984..5ad65630dee 100755 --- 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 index 2f8d415aa2f..a23c0aba562 100644 --- 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 index 8aa72d85ead..e41531208ae 100644 --- a/components/icon/page/index.ts +++ b/components/icon/page/index.ts @@ -335,33 +335,33 @@ declare const locale: NzSafeAny;
@@ -375,9 +375,8 @@ declare const locale: NzSafeAny;
- - +
@@ -403,7 +402,7 @@ declare const locale: NzSafeAny;