diff --git a/angular.json b/angular.json
index 8152c48314b..08b3d034b2b 100644
--- a/angular.json
+++ b/angular.json
@@ -22,7 +22,7 @@
"site/src/404.html",
{
"glob": "**/*",
- "input": "./node_modules/@ant-design/icons/inline-svg/",
+ "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
],
diff --git a/components/breadcrumb/demo/separator.ts b/components/breadcrumb/demo/separator.ts
index 7438fca6742..ef9f91d8d4a 100644
--- a/components/breadcrumb/demo/separator.ts
+++ b/components/breadcrumb/demo/separator.ts
@@ -1,5 +1,4 @@
import { Component } from '@angular/core';
-import { ArrowRightOutline } from '@ant-design/icons-angular/icons';
@Component({
selector: 'nz-demo-breadcrumb-separator',
diff --git a/components/icon/demo/basic.ts b/components/icon/demo/basic.ts
index 3e548de9af8..287e608efaf 100644
--- a/components/icon/demo/basic.ts
+++ b/components/icon/demo/basic.ts
@@ -8,13 +8,14 @@ import { Component } from '@angular/core';
+
-
+
`,
styles: [ `
diff --git a/components/icon/doc/index.en-US.md b/components/icon/doc/index.en-US.md
index 54c6f4dc7c4..131de7f8133 100755
--- a/components/icon/doc/index.en-US.md
+++ b/components/icon/doc/index.en-US.md
@@ -65,32 +65,23 @@ All the icons will be rendered to ``, and styles and classes applied to ` antDesignIcons[key])
- );
-
// Import what you need.
- // this.iconService.addIcon(ApartmentOutline);
+ this.iconService.addIcon(ApartmentOutline);
}
}
```
-Static loading would increase your bundle's size so we strongly recommend you not to register all of the icons. You can track this [issue](https://github.com/ant-design/ant-design/issues/12011) of Ant Design for more details.
+Static loading would increase your bundle's size so we recommend use dynamic importing as much as you can. You can track this [issue](https://github.com/ant-design/ant-design/issues/12011) of Ant Design for more details.
+
+> Icons used by `NG-ZORRO` itself are imported statically to increase loading speed. However, icons demonstrated on the official website are loaded dynamically.
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:
@@ -99,7 +90,7 @@ Dynamic importing. This way would not increase your bundle's size. When NG-ZORRO
"assets": [
{
"glob": "**/*",
- "input": "./node_modules/@ant-design/icons/inline-svg/",
+ "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
]
diff --git a/components/icon/doc/index.zh-CN.md b/components/icon/doc/index.zh-CN.md
index 8f994227b19..8e45e35c3ef 100755
--- a/components/icon/doc/index.zh-CN.md
+++ b/components/icon/doc/index.zh-CN.md
@@ -66,32 +66,23 @@ NG-ZORRO 之前并没有图标组件,而是提供了基于字体文件的解
对于 Ant Design 提供的图标,我们提供了两种方式来加载图标资源文件。
-静态加载,通过在 `NzIconService` 中注册图标来实现静态引入,引入后的文件会被打包到 `.js` 文件中。可以全量引入,也可以按需引入,在 constructor 里或者在 `AppInitService` 里(推荐),例如:
+静态加载,通过在 `NzIconService` 中注册图标来实现静态引入,引入后的文件会被打包到 `.js` 文件中。在 constructor 里或者在 `AppInitService` 里(推荐),例如:
```ts
-import { IconDefinition } from '@ant-design/icons-angular';
-import * as AllIcons from '@ant-design/icons-angular/icons';
+import { ApartmentOutline } from '@ant-design/icons-angular/icons';
import { NzIconService } from 'ng-zorro-antd';
-// import { ApartmentOutline } from '@ant-design/icons-angular/icons';
-
export class AppComponent implements OnInit, AfterViewInit {
constructor(private iconService: NzIconService) {
- // Import all.
- const antDesignIcons = AllIcons as {
- [key: string]: IconDefinition;
- };
- this.iconService.addIcon(...Object.keys(antDesignIcons).map(
- key => antDesignIcons[key])
- );
-
// Import what you need.
- // this.iconService.addIcon(ApartmentOutline);
+ this.iconService.addIcon(ApartmentOutline);
}
}
```
-静态引入会增加包体积,我们非常不建议使用全量引入的方式,具体请看 Ant Design 的 [issue](https://github.com/ant-design/ant-design/issues/12011)。
+静态引入会增加包体积,所以我们建议尽可能地使用动态加载,如果要静态加载,也仅仅加载你需要用到的 icon,具体请看 Ant Design 的 [issue](https://github.com/ant-design/ant-design/issues/12011)。
+
+> 为了加快渲染速度,`NG-ZORRO` 本身用到的 icon 是静态引入的。而官网的图标是动态引入的。
动态加载,这是为了减少包体积而提供的方式。当 NG-ZORRO 检测用户想要渲染的图标还没有静态引入时,会发起 HTTP 请求动态引入。你只需要配置 `angular.json` 文件:
@@ -100,7 +91,7 @@ export class AppComponent implements OnInit, AfterViewInit {
"assets": [
{
"glob": "**/*",
- "input": "./node_modules/@ant-design/icons/inline-svg/",
+ "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
]
diff --git a/components/icon/nz-icon.directive.ts b/components/icon/nz-icon.directive.ts
index c69e91bd94d..33a541a7ec0 100644
--- a/components/icon/nz-icon.directive.ts
+++ b/components/icon/nz-icon.directive.ts
@@ -9,7 +9,7 @@ import {
OnInit,
Renderer2
} from '@angular/core';
-import { withSuffix, IconDirective } from '@ant-design/icons-angular';
+import { IconDirective } from '@ant-design/icons-angular';
import { NzIconService } from './nz-icon.service';
/**
@@ -35,17 +35,13 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
* Should be removed in next major version.
*/
private _classChangeHandler(className: string): void {
- if (!className) {
- return;
- }
+ if (!className) { return; }
const forceSpin = className.indexOf('anticon-spin') > -1;
const classArr = className.split(/\s/);
let anticonType = classArr.filter(cls => cls !== 'anticon' && cls !== 'anticon-spin' && cls.match(/^anticon\-\w/))[ 0 ];
- if (!anticonType) {
- return;
- }
+ if (!anticonType) { return; }
anticonType = anticonType.replace('anticon-', '');
if (anticonType.includes('verticle')) {
@@ -65,19 +61,10 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
if (!(anticonType.endsWith('-o') || anticonType.endsWith('-fill') || anticonType.endsWith('-twotone'))) {
anticonType += '-o';
}
- if (anticonType.startsWith('loading') || forceSpin) {
- this.spin = true;
- } else {
- this.spin = false;
- }
if (this.type !== anticonType) {
this.type = anticonType;
- this._changeIcon()
- .then(svg => {
- this._addExtraModifications(svg);
- })
- .catch(err => {
+ this._changeIcon().catch(err => {
console.warn('[NG-ZORRO]', `You can find more about this error on http://ng.ant.design/components/icon/en\n`, err);
});
}
diff --git a/components/icon/nz-icon.spec.ts b/components/icon/nz-icon.spec.ts
index d29341a58e7..094c1f64c11 100644
--- a/components/icon/nz-icon.spec.ts
+++ b/components/icon/nz-icon.spec.ts
@@ -15,13 +15,13 @@ describe('icon', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports : [ CommonModule, NzIconModule ],
- declarations: [ NzTestIconComponent, NzTestIconCustomComponent, NzTestIconIconfontComponent, NzTestIconOldApiComponent ]
+ declarations: [ NzTestIconExtensionsComponent, NzTestIconCustomComponent, NzTestIconIconfontComponent, NzTestIconOldApiComponent ]
}).compileComponents();
});
describe('extensions', () => {
beforeEach(() => {
- fixture = TestBed.createComponent(NzTestIconComponent);
+ fixture = TestBed.createComponent(NzTestIconExtensionsComponent);
testComponent = fixture.debugElement.componentInstance;
icons = fixture.debugElement.queryAll(By.directive(NzIconDirective));
});
@@ -77,7 +77,6 @@ describe('icon', () => {
it('should support iconfont', async(() => {
fixture.detectChanges();
-
fixture.whenStable().then(() => {
fixture.detectChanges();
icons = fixture.debugElement.queryAll(By.directive(NzIconDirective));
@@ -104,24 +103,17 @@ describe('icon', () => {
expect(icons[ 0 ].nativeElement.className).toContain('anticon');
expect(icons[ 0 ].nativeElement.innerHTML).toContain('svg');
});
-
- it('should make loading spin', fakeAsync(() => {
- fixture.detectChanges();
- tick(1000);
- fixture.detectChanges();
- expect(icons[ 1 ].nativeElement.classList.contains('anticon-spin')).toBe(true);
- }));
});
});
@Component({
- selector: 'nz-test-icon',
+ selector: 'nz-test-icon-extensions',
template: `
`
})
-export class NzTestIconComponent {
+export class NzTestIconExtensionsComponent {
type = 'question';
theme = 'outline';
spin = true;
@@ -163,8 +155,10 @@ export class NzTestIconIconfontComponent {
@Component({
selector: 'nz-test-icon-old-api',
template: `
-
-
+
+
+
+
`
})
export class NzTestIconOldApiComponent {
diff --git a/components/icon/page/index.ts b/components/icon/page/index.ts
index 30ea22e9668..8fe05a4062d 100644
--- a/components/icon/page/index.ts
+++ b/components/icon/page/index.ts
@@ -1,7 +1,8 @@
import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';
-
-const mani = require('@ant-design/icons/lib/manifest').default;
+import { manifest } from '@ant-design/icons-angular';
+import { AccountBookFill } from '@ant-design/icons-angular/icons';
+import { NzIconService } from 'ng-zorro-antd';
const categories = {
direction : [
@@ -249,7 +250,7 @@ export class NzPageDemoIconComponent implements OnInit {
const names = Object.keys(categories)
.map(category => ({
name : category,
- icons: categories[ category ].filter(name => mani[ value ].indexOf(name) > -1)
+ icons: categories[ category ].filter(name => manifest[ value ].indexOf(name) > -1)
}))
.filter(({ icons }) => Boolean(icons.length));
@@ -258,7 +259,9 @@ export class NzPageDemoIconComponent implements OnInit {
this.currentTheme = value;
}
- constructor(@Inject(DOCUMENT) private dom: any) {
+ constructor(@Inject(DOCUMENT) private dom: any, private _iconService: NzIconService) {
+ // This is to test that tree shake works!
+ this._iconService.addIcon(AccountBookFill);
}
ngOnInit() {
diff --git a/components/ng-zorro-antd.module.ts b/components/ng-zorro-antd.module.ts
index 71bed428b9f..f33985417b2 100644
--- a/components/ng-zorro-antd.module.ts
+++ b/components/ng-zorro-antd.module.ts
@@ -1,4 +1,5 @@
import { ModuleWithProviders, NgModule } from '@angular/core';
+
import { NzAffixModule } from './affix/nz-affix.module';
import { NzAlertModule } from './alert/nz-alert.module';
import { NzAnchorModule } from './anchor/nz-anchor.module';
@@ -32,7 +33,6 @@ import { NzMenuModule } from './menu/nz-menu.module';
import { NzMessageModule } from './message/nz-message.module';
import { NzModalModule } from './modal/nz-modal.module';
import { NzNotificationModule } from './notification/nz-notification.module';
-import { NzTreeSelectModule } from './tree-select/nz-tree-select.module';
import { NzPaginationModule } from './pagination/nz-pagination.module';
import { NzPopconfirmModule } from './popconfirm/nz-popconfirm.module';
import { NzPopoverModule } from './popover/nz-popover.module';
@@ -52,6 +52,7 @@ import { NzTimePickerModule } from './time-picker/nz-time-picker.module';
import { NzTimelineModule } from './timeline/nz-timeline.module';
import { NzToolTipModule } from './tooltip/nz-tooltip.module';
import { NzTransferModule } from './transfer/nz-transfer.module';
+import { NzTreeSelectModule } from './tree-select/nz-tree-select.module';
import { NzTreeModule } from './tree/nz-tree.module';
import { NzUploadModule } from './upload/nz-upload.module';
diff --git a/components/package.json b/components/package.json
index cb26ad18bc6..d89d316f0a1 100644
--- a/components/package.json
+++ b/components/package.json
@@ -23,7 +23,7 @@
"dependencies": {
"date-fns": "^1.29.0",
"@angular/cdk": "^6.0.0",
- "@ant-design/icons-angular": "0.0.1-alpha.1"
+ "@ant-design/icons-angular": "^0.0.1"
},
"peerDependencies": {
"@angular/animations": "^6.0.0",
diff --git a/package.json b/package.json
index 6d29bf8d438..47791b86a29 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
},
"dependencies": {
"@angular/cdk": "^6.0.0",
- "@ant-design/icons-angular": "0.0.1-alpha.1",
+ "@ant-design/icons-angular": "^0.0.1",
"date-fns": "^1.29.0"
},
"devDependencies": {
@@ -103,6 +103,7 @@
"tslib": "^1.9.0",
"tslint": "~5.11.0",
"typescript": "~2.9.2",
+ "webpack-bundle-analyzer": "^3.0.2",
"yaml-front-matter": "^3.4.0",
"zone.js": "^0.8.26"
},
diff --git a/schematics/fix-icon/index.ts b/schematics/fix-icon/index.ts
index 86e047be9b3..80ea7cd0b10 100644
--- a/schematics/fix-icon/index.ts
+++ b/schematics/fix-icon/index.ts
@@ -5,7 +5,7 @@ import { Schema } from './schema';
const ICON_ASSET_CONFIG = {
'glob' : '**/*',
- 'input' : './node_modules/@ant-design/icons/inline-svg/',
+ 'input' : './node_modules/@ant-design/icons-angular/src/inline-svg/',
'output': '/assets/'
};
diff --git a/scripts/site/_site/src/app/app.component.ts b/scripts/site/_site/src/app/app.component.ts
index fa930eee74e..ca4e30ae279 100644
--- a/scripts/site/_site/src/app/app.component.ts
+++ b/scripts/site/_site/src/app/app.component.ts
@@ -1,8 +1,6 @@
import { AfterViewInit, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { NavigationEnd, Router } from '@angular/router';
-import { IconDefinition } from '@ant-design/icons-angular';
-import * as AllIcons from '@ant-design/icons-angular/icons';
import { en_US, zh_CN, NzI18nService, NzIconService, NzMessageService } from 'ng-zorro-antd';
import { environment } from '../environments/environment';
import { ROUTER_LIST } from './router';
@@ -45,12 +43,6 @@ export class AppComponent implements OnInit, AfterViewInit {
}
constructor(private router: Router, private title: Title, private nzI18nService: NzI18nService, private msg: NzMessageService, private iconService: NzIconService) {
- const antDesignIcons = AllIcons as {
- [key: string]: IconDefinition;
- };
- this.iconService.addIcon(...Object.keys(antDesignIcons).map(
- key => antDesignIcons[key])
- );
this.iconService.twoToneColor = { primaryColor: '#1890ff' };
}