Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: bump icons-angular to v19 #677

Merged
merged 3 commits into from
Nov 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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