diff --git a/packages/icons-angular/README.md b/packages/icons-angular/README.md deleted file mode 100644 index 134e6e29d..000000000 --- a/packages/icons-angular/README.md +++ /dev/null @@ -1,119 +0,0 @@ -

-Ant Design Icons for Angular -

- -
- -[![NPM version](https://img.shields.io/npm/v/@ant-design/icons-angular.svg?style=flat)](https://npmjs.org/package/@ant-design/icons-angular) -[![NPM downloads](http://img.shields.io/npm/dm/@ant-design/icons-angular.svg?style=flat)](https://npmjs.org/package/@ant-design/icons-angular) - -
- -![](./demo.png) - -## Installation - -```bash -ng add @ant-design/icons-angular - -# or npm install @ant-design/icons-angular -``` - -## Usage - -You should import `IconModule` in your application's root module. - -```ts -import { IconModule } from '@ant-design/icons-angular'; - -@NgModule({ - imports: [ - IconModule - ] -}) -export class AppModule { } -``` - -And register the icons that you need to `IconService` (All or explicitly. We call it **static loading**): - -> ATTENTION! We strongly suggest you not to register all icons. That would increase your bundle's size dramatically. - -```ts -import { Component, OnInit } from '@angular/core'; -import { IconDefinition, IconService } from '@ant-design/icons-angular'; -import { AccountBookFill } from '@ant-design/icons-angular/icons' -// import * as AllIcons from 'ant-icons-angular/icons'; - -@Component({ - selector : 'app-root', - templateUrl: './app.component.html', - styleUrls : ['./app.component.css'] -}) -export class AppComponent implements OnInit { - constructor(private _iconService: IconService) { - // Import all. NOT RECOMMENDED. ❌ - // const antDesignIcons = AllIcons as { - // [key: string]: IconDefinition; - // }; - // this._iconService.addIcon(...Object.keys(antDesignIcons).map(key => antDesignIcons[key])); - // Import what you need! ✔️ - this._iconService.addIcon(...[ AccountBookFill ]); - this._iconService.twoToneColor = { primaryColor: '#1890ff' }; - } -} -``` - -When you want to render an icon: - -```html - -``` - -Checkout the demo for more details. - -For icons provided by Ant Design, we provide **dynamic loading** strategy to reduce bundle's size. Just config your `angular.json` and you even don't need to register the icons! Checkout our `examples` dir and `angular.json` file for more details. - -### Jsonp-like Dynamic Loading - -If your static file server don't support cross origin XML requests, you can use jsonp-like dynamic loading by calling the `useJsonpLoading` method of `IconService`. - -### Namespace - -Namespace is a new feature first introduced in `2.0.0-beta.2`. It allows users to register their own icons with simple API, support both dynamic loading and static loading. - -Say you want to add a `panda` icon in `animal` namespace. For static loading, you should call `addIconLiteral('animal:panda', '...')`. For dynamic loading, just put `panda.svg` under `assets/animal`. And render a panda like: ``. - -Please checkout the demo for more details. - -## Development - -This package, unlike `@ant-design/icons-react`, does not list `@ant-design/icons` as a dependency. It has its own build up tooling chain which brings benefits like: - -* **Tree shake**. -* Providing dynamic and static loading. -* Reduced bundle size (500KB less if you only use dynamic loading). -* Better performance because of no `svg => abstract node => svg` process. - -### Setup - -Install dependencies of `@ant-design/icons-angular`, and run `npm run generate`. - -### Test - -Run `ng test`. - -### Demo - -Run `ng serve` after `npm run generate`. - -### Build - -Build the library by running the script we provide. - -```bash -$ ./build.sh -``` - -### Extension - -You can simply extend this package by creating directives or services that extends `IconDirective` and `IconService`. And it is worth mentioning that `_changeIcon` method returns a `Promise` using which you could add extra modifications. [ng-zorro-antd](https://github.com/NG-ZORRO/ng-zorro-antd/tree/master/components/icon) is a good example of extending this package. diff --git a/packages/icons-angular/README.md b/packages/icons-angular/README.md new file mode 120000 index 000000000..07eda6c0e --- /dev/null +++ b/packages/icons-angular/README.md @@ -0,0 +1 @@ +./src/README.md \ No newline at end of file diff --git a/packages/icons-angular/demo.png b/packages/icons-angular/demo.png deleted file mode 100644 index 629cc94dd..000000000 Binary files a/packages/icons-angular/demo.png and /dev/null differ diff --git a/packages/icons-angular/package.json b/packages/icons-angular/package.json index 003769e3f..d99356e80 100644 --- a/packages/icons-angular/package.json +++ b/packages/icons-angular/package.json @@ -7,7 +7,8 @@ "lint": "ng lint", "test": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI --code-coverage", "build": "ng build examples --configuration production", - "build:lib": "npm run generate && ng build ant-design-icons-angular --configuration production && npm run copy:assets", + "build:lib": "npm run clean && npm run generate && ng build ant-design-icons-angular --configuration production && npm run copy:assets", + "clean": "cross-env TS_NODE_PROJECT=scripts/tsconfig.json node --require ts-node/register scripts/clean.ts", "generate": "cross-env TS_NODE_PROJECT=scripts/tsconfig.json node --require ts-node/register scripts/generate.ts", "copy:assets": "cross-env node --require ts-node/register scripts/copy.ts", "ci": "npm run build:lib" diff --git a/packages/icons-angular/scripts/clean.ts b/packages/icons-angular/scripts/clean.ts new file mode 100644 index 000000000..dc7efc340 --- /dev/null +++ b/packages/icons-angular/scripts/clean.ts @@ -0,0 +1,9 @@ +const fs = require('fs-extra'); +const path = require('path'); + +function clean() { + const iconDist = path.resolve(__dirname, '../dist/icons'); + fs.removeSync(iconDist); +} + +clean(); diff --git a/packages/icons-angular/scripts/copy.ts b/packages/icons-angular/scripts/copy.ts index d5d1a0132..a11f96d21 100644 --- a/packages/icons-angular/scripts/copy.ts +++ b/packages/icons-angular/scripts/copy.ts @@ -2,8 +2,8 @@ const fs = require('fs-extra'); const path = require('path'); function copyAssets() { - const from = path.resolve(__dirname, '../src'); - const to = path.resolve(__dirname, '../dist/icons/src'); + const from = path.resolve(__dirname, '../src/inline-svg'); + const to = path.resolve(__dirname, '../dist/icons/src/inline-svg'); fs.copy(from, to); } diff --git a/packages/icons-angular/src/README.md b/packages/icons-angular/src/README.md index 62e601102..11bdd02b7 100644 --- a/packages/icons-angular/src/README.md +++ b/packages/icons-angular/src/README.md @@ -9,7 +9,7 @@ Ant Design Icons for Angular -> With a better taste. +![](./demo.png) ## Installation @@ -83,12 +83,7 @@ Please checkout the demo for more details. ## Development -This package, unlike `@ant-design/icons-react`, does not list `@ant-design/icons` as a dependency. It has its own build up tooling chain which brings benefits like: - -* **Tree shake**. -* Providing dynamic and static loading. -* Reduced bundle size (500KB less if you only use dynamic loading). -* Better performance because of no `svg => abstract node => svg` process. +You can find the source code [here](https://github.com/ant-design/ant-design-icons). ### Setup @@ -96,15 +91,11 @@ Install dependencies of `@ant-design/icons-angular`, and run `npm run generate`. ### Demo -Run `ng serve` after `npm run generate`. +Run `npm run generate` and then `npm run start`. ### Build -Build the library by running the script we provide. - -```bash -$ ./build.sh -``` +Run `npm run build:lib`. ### Extension