diff --git a/components/icon/demo/basic.md b/components/icon/demo/basic.md index 7032ed5bc7f..7e74b02cdd7 100644 --- a/components/icon/demo/basic.md +++ b/components/icon/demo/basic.md @@ -7,8 +7,14 @@ title: ## zh-CN -使用 `` 标签声明组件，指定图标对应的 `nzType` 属性。可以通过 `nzTheme` 属性来设置不同的主题风格的图标，也可以通过设置 `nzSpin` 属性来实现动画旋转效果。对旧的 API `` 兼容。 +使用 `` 来声明组件。使用 `nzType` 属性指定对应的图标。 +可以通过 `nzTheme` 属性来设置不同的主题风格的图标，也可以通过设置 `nzSpin` 属性来实现动画旋转效果。 + +> `` 自 v19 版本起受支持，而 `` 与 `` 仍受支持，但不再推荐。 ## 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 `` +Use `` to declare the component. Use the `nzType` property to specify the corresponding icon. +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. + +> `` is supported since v19, while `` and `` are still supported but not recommended. diff --git a/components/icon/demo/basic.ts b/components/icon/demo/basic.ts index 3f4088570a1..8f68681b6e8 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..b737003884b 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..c7cb5068848 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..d0b9c490077 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/icon.spec.ts b/components/icon/icon.spec.ts index e309d020916..24cc13f0cdd 100644 --- a/components/icon/icon.spec.ts +++ b/components/icon/icon.spec.ts @@ -17,7 +17,7 @@ import { ComponentBed, createComponentBed } from 'ng-zorro-antd/core/testing/com import { NzIconDirective } from './icon.directive'; import { NzIconModule } from './icon.module'; -import { NzIconService, NZ_ICONS } from './icon.service'; +import { NZ_ICONS, NzIconService } from './icon.service'; import { provideNzIcons, provideNzIconsPatch } from './provide-icons'; describe('nz-icon', () => { @@ -266,8 +266,8 @@ describe('nz-icon', () => { // eslint-disable-next-line selector: 'nz-test-icon-extensions', template: ` - - + + ` }) export class NzTestIconExtensionsComponent { @@ -281,22 +281,22 @@ export class NzTestIconExtensionsComponent { @Component({ template: ` - + - + ` }) export class NzTestIconCustomComponent {} @Component({ template: ` - - - + + + ` }) export class NzTestIconIconfontComponent { @@ -316,8 +316,8 @@ class ChildModule {} @Component({ template: ` - - + + ` }) class NzTestIconMultiInjectionComponent {} @@ -327,8 +327,8 @@ class NzTestIconMultiInjectionComponent {} imports: [NzIconModule], providers: [provideNzIconsPatch([QuestionOutline])], template: ` - - + + ` }) class NzTestIconMultiInjectionStandaloneComponent {} 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;
    @for (icon of displayedNames[i].icons; track trackByFn(icon)) {
  • - + @if (isNewIcon(icon)) { @@ -434,7 +433,7 @@ declare const locale: NzSafeAny; [nzShowUploadList]="{ showPreviewIcon: false, showRemoveIcon: false }" >

    - +

    {{ localeObj.picSearcherUploadText }}

    {{ localeObj.picSearcherUploadHint }}

    @@ -458,8 +457,7 @@ declare const locale: NzSafeAny; @for (icon of icons; track icon) { - - + @@ -538,7 +536,7 @@ export class NzPageDemoIconComponent implements OnInit, OnDestroy { onIconClick(e: MouseEvent, icon: string): void { const target = e.target as HTMLElement; - const copiedString = ``; + const copiedString = ``; target.classList.add('copied'); this._copy(copiedString).then(() => { setTimeout(() => {