Skip to content

Commit

Permalink
chore: bump icons-angular to v19 (#677)
Browse files Browse the repository at this point in the history
* chore: bump icons-angular to v19

* chore: update example site

* chore: bump cross-env to v7
  • Loading branch information
Laffery authored Nov 20, 2024
1 parent bdc9510 commit 252e21b
Show file tree
Hide file tree
Showing 16 changed files with 153 additions and 207 deletions.
8 changes: 4 additions & 4 deletions packages/icons-angular/examples/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ <h2>Ant Design Icons</h2>
</select>
</p>

<ng-container *ngFor="let name of icons;">
@for (name of icons; track name) {
<span antIcon [type]="name" [theme]="currentTheme"></span>
</ng-container>
}

<!-- To test `share` dynamic importing. -->

<ng-container *ngIf="currentTheme === 'fill'">
@if (currentTheme === 'fill') {
<h2>With Namespace</h2>
<span antIcon [type]="'animal:panda'"></span>
<span antIcon [type]="'animal:panda'"></span>
</ng-container>
}
19 changes: 5 additions & 14 deletions packages/icons-angular/examples/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,21 +1,12 @@
import { FormsModule } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import { manifest, IconService, Manifest, ThemeType } from '@ant-design/icons-angular';

// const pandaLiteral = `<svg viewBox="0 0 1024 1024">
// <path d="M99.096 315.634s-82.58-64.032-82.58-132.13c0-66.064 33.032-165.162 148.646-148.646 83.37 11.91 99.096 165.162 99.096 165.162l-165.162 115.614zM924.906 315.634s82.58-64.032 82.58-132.13c0-66.064-33.032-165.162-148.646-148.646-83.37 11.91-99.096 165.162-99.096 165.162l165.162 115.614z" fill="#6B676E" p-id="1143" />
// <path d="M1024 561.548c0 264.526-229.23 429.42-512.002 429.42S0 826.076 0 561.548 283.96 66.064 512.002 66.064 1024 297.022 1024 561.548z" fill="#FFEBD2" p-id="1144" />
// <path d="M330.324 842.126c0 82.096 81.34 148.646 181.678 148.646s181.678-66.55 181.678-148.646H330.324z" fill="#E9D7C3" p-id="1145" />
// <path d="M644.13 611.098C594.582 528.516 561.55 512 512.002 512c-49.548 0-82.58 16.516-132.13 99.096-42.488 70.814-78.73 211.264-49.548 247.742 66.064 82.58 165.162 33.032 181.678 33.032 16.516 0 115.614 49.548 181.678-33.032 29.18-36.476-7.064-176.93-49.55-247.74z" fill="#FFFFFF" p-id="1146" />
// <path d="M611.098 495.484c0-45.608 36.974-82.58 82.58-82.58 49.548 0 198.194 99.098 198.194 165.162s-79.934 144.904-148.646 99.096c-49.548-33.032-132.128-148.646-132.128-181.678zM412.904 495.484c0-45.608-36.974-82.58-82.58-82.58-49.548 0-198.194 99.098-198.194 165.162s79.934 144.904 148.646 99.096c49.548-33.032 132.128-148.646 132.128-181.678z" fill="#6B676E" p-id="1147" />
// <path d="M512.002 726.622c-30.06 0-115.614 5.668-115.614 33.032 0 49.638 105.484 85.24 115.614 82.58 10.128 2.66 115.614-32.944 115.614-82.58-0.002-27.366-85.556-33.032-115.614-33.032z" fill="#464655" p-id="1148" />
// <path d="M330.324 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z" fill="#464655" p-id="1149" />
// <path d="M693.678 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z" fill="#464655" p-id="1150" />
// </svg>`;
import { manifest, IconService, Manifest, ThemeType, IconDirective } from '@ant-design/icons-angular';

@Component({
selector : 'app-root',
selector: 'app-root',
imports: [FormsModule, IconDirective],
templateUrl: './app.component.html',
styleUrls : [ './app.component.css' ]
styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {
currentTheme: ThemeType = 'fill';
Expand Down
17 changes: 17 additions & 0 deletions packages/icons-angular/examples/app/app.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { ApplicationConfig } from '@angular/core';

import { AppInterceptor } from './app-interceptor';
import { provideAntIcons } from '@ant-design/icons-angular';

export const appConfig: ApplicationConfig = {
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AppInterceptor,
multi: true
},
provideAntIcons([]),
provideHttpClient(withInterceptorsFromDi())
]
};
25 changes: 0 additions & 25 deletions packages/icons-angular/examples/app/app.module.ts

This file was deleted.

8 changes: 4 additions & 4 deletions packages/icons-angular/examples/main.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppModule } from './app/app.module';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
bootstrapApplication(AppComponent, appConfig).catch(err => console.log(err));
47 changes: 23 additions & 24 deletions packages/icons-angular/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
"name": "@ant-design/icons-angular-workspace",
"version": "0.0.0-NOT-VALID",
"scripts": {
"ng": "ng",
"start": "ng serve",
"lint": "ng lint",
"test": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI --code-coverage",
Expand All @@ -16,35 +15,35 @@
"license": "MIT",
"private": true,
"dependencies": {
"@angular/common": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/common": "^19.0.0",
"@angular/core": "^19.0.0",
"@ant-design/colors": "^7.0.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.0.1",
"@angular-eslint/builder": "^18.0.0-alpha.5",
"@angular-eslint/eslint-plugin": "^18.0.0-alpha.5",
"@angular-eslint/eslint-plugin-template": "^18.0.0-alpha.5",
"@angular-eslint/schematics": "^18.0.0-alpha.5",
"@angular-eslint/template-parser": "^18.0.0-alpha.5",
"@angular/animations": "^18.0.0",
"@angular/cli": "^18.0.1",
"@angular/compiler": "^18.0.0",
"@angular/compiler-cli": "^18.0.0",
"@angular/forms": "^18.0.0",
"@angular/language-service": "^18.0.0",
"@angular/platform-browser": "^18.0.0",
"@angular/platform-browser-dynamic": "^18.0.0",
"@angular/router": "^18.0.0",
"@angular-devkit/build-angular": "^19.0.0",
"@angular-eslint/builder": "^19.0.0-alpha.0",
"@angular-eslint/eslint-plugin": "^19.0.0-alpha.0",
"@angular-eslint/eslint-plugin-template": "^19.0.0-alpha.0",
"@angular-eslint/schematics": "^19.0.0-alpha.0",
"@angular-eslint/template-parser": "^19.0.0-alpha.0",
"@angular/animations": "^19.0.0",
"@angular/cli": "^19.0.0",
"@angular/compiler": "^19.0.0",
"@angular/compiler-cli": "^19.0.0",
"@angular/forms": "^19.0.0",
"@angular/language-service": "^19.0.0",
"@angular/platform-browser": "^19.0.0",
"@angular/platform-browser-dynamic": "^19.0.0",
"@angular/router": "^19.0.0",
"@ant-design/icons-svg": "^4.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/lodash": "^4.14.136",
"@types/node": "^13.9.3",
"@types/node": "^20.11.1",
"@typescript-eslint/eslint-plugin": "^6.10.0",
"@typescript-eslint/parser": "^6.10.0",
"classlist": "^2.0.0",
"cross-env": "^5.2.0",
"cross-env": "^7.0.3",
"eslint": "^8.53.0",
"fs-extra": "^7.0.0",
"globby": "^8.0.1",
Expand All @@ -57,11 +56,11 @@
"karma-jasmine-html-reporter": "^2.0.0",
"karma-spec-reporter": "^0.0.36",
"lodash": "^4.17.11",
"ng-packagr": "^18.0.0",
"ng-packagr": "^19.0.0",
"prettier": "^2.8.8",
"rxjs": "^7.8.0",
"ts-node": "~10.9.0",
"typescript": "~5.4.5",
"zone.js": "~0.14.2"
"typescript": "~5.6.3",
"zone.js": "~0.15.0"
}
}
}
43 changes: 28 additions & 15 deletions packages/icons-angular/src/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,48 +21,59 @@ ng add @ant-design/icons-angular

## Usage

You should import `IconModule` in your application's root module.
You should import `IconDirective` in your component.

```ts
import { IconModule } from '@ant-design/icons-angular';
import { IconDirective } from '@ant-design/icons-angular';

@NgModule({
imports: [
IconModule
]
@Component({
imports: [ IconDirective ]
})
export class AppModule { }
export class AppComponent {}
```

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 { Component } from '@angular/core';
import { 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 {
export class AppComponent {
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' };
}
}
```

You can also provide icons you need in the `app.config.ts`:

```ts
import { ApplicationConfig } from '@angular/core';
import { provideAntIcons } from '@ant-design/icons-angular';
import { AccountBookFill } from '@ant-design/icons-angular/icons';

export const appConfig: ApplicationConfig = {
providers: [
provideAntIcons([ AccountBookFill ])
]
};
```

When you want to render an icon:

```html
Expand All @@ -75,7 +86,7 @@ For icons provided by Ant Design, we provide **dynamic loading** strategy to red

### 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.
Namespace is 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', '<svg>...</svg>')`. For dynamic loading, just put `panda.svg` under `assets/animal`. And render a panda like: `<span antIcon type="animal:panda">`.

Expand All @@ -99,4 +110,6 @@ Run `npm run build:lib`.

### 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<svg>` 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.
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<svg>` 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.
6 changes: 4 additions & 2 deletions packages/icons-angular/src/component/icon.directive.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
Directive,
ElementRef,
inject,
Input,
OnChanges,
Renderer2,
Expand All @@ -25,11 +26,12 @@ function checkMeta(prev: RenderMeta, after: RenderMeta): boolean {
})
export class IconDirective implements OnChanges {
@Input() type: string | IconDefinition;

@Input() theme?: ThemeType;
@Input() twoToneColor?: string;

constructor(protected _iconService: IconService, protected _elementRef: ElementRef, protected _renderer: Renderer2) {}
protected _elementRef = inject(ElementRef);
protected _renderer = inject(Renderer2);
constructor(protected _iconService: IconService) {}

ngOnChanges(changes: SimpleChanges): void {
if (changes.type || changes.theme || changes.twoToneColor) {
Expand Down
12 changes: 7 additions & 5 deletions packages/icons-angular/src/component/icon.module.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { NgModule } from '@angular/core';
import { IconDirective } from './icon.directive';
import { IconService } from './icon.service';


/**
* @deprecated Please use `IconDirective` instead, will be removed in v20.
*/
@NgModule({
exports: [IconDirective],
declarations: [IconDirective],
providers: [IconService]
imports: [IconDirective],
exports: [IconDirective]
})
export class IconModule { }
export class IconModule {}
17 changes: 17 additions & 0 deletions packages/icons-angular/src/component/icon.provider.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { EnvironmentProviders, makeEnvironmentProviders } from "@angular/core";
import { ANT_ICONS } from "./icon.service";
import { IconDefinition } from "../types";

/**
* Provide icon definitions in root
*
* @param icons Icon definitions
*/
export function provideAntIcons(icons: IconDefinition[]): EnvironmentProviders {
return makeEnvironmentProviders([
{
provide: ANT_ICONS,
useValue: icons
}
]);
}
4 changes: 3 additions & 1 deletion packages/icons-angular/src/component/icon.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,9 @@ const JSONP_HANDLER_NAME = '__ant_icon_load';

export const ANT_ICONS = new InjectionToken<IconDefinition[]>('ant_icons');

@Injectable()
@Injectable({
providedIn: 'root'
})
export class IconService {
defaultTheme: ThemeType = 'outline';

Expand Down
Loading

0 comments on commit 252e21b

Please sign in to comment.