@ng-icons/core 27.5.2 → 28.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
# Ng Icons
|
|
10
10
|
|
|
11
11
|
The all-in-one icon library for Angular. This allows you to use icons from multiple icon sets with a single icon component.
|
|
12
|
-
Containing over
|
|
12
|
+
Containing over 53,600 icons for you to use in your projects.
|
|
13
13
|
|
|
14
14
|
Currently, we support the following libraries:
|
|
15
15
|
|
|
@@ -37,6 +37,7 @@ Currently, we support the following libraries:
|
|
|
37
37
|
- [Iconsax](https://iconsax.io/)
|
|
38
38
|
- [TDesign Icons](https://github.com/Tencent/tdesign-icons)
|
|
39
39
|
- [Lets Icons](https://www.figma.com/community/file/886554014393250663/free-icon-pack-1800-icons)
|
|
40
|
+
- [Huge Icons](https://hugeicons.com/)
|
|
40
41
|
|
|
41
42
|
Got suggestions for additional iconsets? Create an issue and we can consider adding them!
|
|
42
43
|
|
|
@@ -57,6 +58,7 @@ Ng Icons is an MIT-licensed open source project with its ongoing development mad
|
|
|
57
58
|
| 15.x.x | 23.x.x - 24.x.x |
|
|
58
59
|
| 16.x.x | 25.x.x |
|
|
59
60
|
| 17.x.x | 26.x.x - 27.x.x |
|
|
61
|
+
| 18.x.x | 28.x.x |
|
|
60
62
|
|
|
61
63
|
> **Note**: Ng Icons relies on modern browser features and is designed to work on evergreen browsers. We do not support older browsers such as IE11.
|
|
62
64
|
|
|
@@ -108,6 +110,7 @@ The following packages are available:
|
|
|
108
110
|
| `@ng-icons/tdesign-icons` | MIT |
|
|
109
111
|
| `@ng-icons/phosphor-icons` | MIT |
|
|
110
112
|
| `@ng-icons/lets-icons` | CC-BY-4.0 |
|
|
113
|
+
| `@ng-icons/huge-icons` | CC0-1.0 |
|
|
111
114
|
|
|
112
115
|
## Usage
|
|
113
116
|
|
|
@@ -58,10 +58,10 @@ export class NgGlyph {
|
|
|
58
58
|
get fontVariationSettings() {
|
|
59
59
|
return `'FILL' ${this.fill ? 1 : 0}, 'wght' ${this.weight}, 'GRAD' ${this.grade}, 'opsz' ${this.opticalSize}`;
|
|
60
60
|
}
|
|
61
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
62
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "
|
|
61
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgGlyph, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
62
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0", type: NgGlyph, isStandalone: true, selector: "ng-glyph", inputs: { name: "name", glyphset: "glyphset", opticalSize: ["opticalSize", "opticalSize", numberAttribute], weight: ["weight", "weight", numberAttribute], grade: ["grade", "grade", numberAttribute], fill: ["fill", "fill", booleanAttribute], size: ["size", "size", coerceCssPixelValue], color: "color" }, host: { properties: { "textContent": "this.name", "style.--ng-glyph__size": "this.size", "style.color": "this.color", "class": "this.glyphsetClass", "style.font-variation-settings": "this.fontVariationSettings" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{display:inline-block;width:var(--ng-glyph__size);height:var(--ng-glyph__size);font-size:var(--ng-glyph__size);overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
63
63
|
}
|
|
64
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
64
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgGlyph, decorators: [{
|
|
65
65
|
type: Component,
|
|
66
66
|
args: [{ selector: 'ng-glyph', standalone: true, template: ``, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;width:var(--ng-glyph__size);height:var(--ng-glyph__size);font-size:var(--ng-glyph__size);overflow:hidden}\n"] }]
|
|
67
67
|
}], propDecorators: { name: [{
|
|
@@ -145,10 +145,10 @@ export class NgIcon {
|
|
|
145
145
|
});
|
|
146
146
|
});
|
|
147
147
|
}
|
|
148
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
149
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "
|
|
148
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
149
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0", type: NgIcon, isStandalone: true, selector: "ng-icon", inputs: { name: "name", svg: "svg", size: ["size", "size", coerceCssPixelValue], strokeWidth: "strokeWidth", color: "color" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:inline-block;width:var(--ng-icon__size);height:var(--ng-icon__size);overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
150
150
|
}
|
|
151
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
151
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgIcon, decorators: [{
|
|
152
152
|
type: Component,
|
|
153
153
|
args: [{ selector: 'ng-icon', template: '', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;width:var(--ng-icon__size);height:var(--ng-icon__size);overflow:hidden}\n"] }]
|
|
154
154
|
}], propDecorators: { name: [{
|
|
@@ -16,11 +16,11 @@ export class NgIconsModule {
|
|
|
16
16
|
static withIcons(icons) {
|
|
17
17
|
return { ngModule: NgIconsModule, providers: provideIcons(icons) };
|
|
18
18
|
}
|
|
19
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
20
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
21
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
19
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgIconsModule, deps: [{ token: NgIconsToken }], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
20
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: NgIconsModule, imports: [NgIcon], exports: [NgIcon] }); }
|
|
21
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgIconsModule }); }
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgIconsModule, decorators: [{
|
|
24
24
|
type: NgModule,
|
|
25
25
|
args: [{
|
|
26
26
|
imports: [NgIcon],
|
|
@@ -109,10 +109,10 @@ class NgGlyph {
|
|
|
109
109
|
get fontVariationSettings() {
|
|
110
110
|
return `'FILL' ${this.fill ? 1 : 0}, 'wght' ${this.weight}, 'GRAD' ${this.grade}, 'opsz' ${this.opticalSize}`;
|
|
111
111
|
}
|
|
112
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
113
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "
|
|
112
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgGlyph, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
113
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0", type: NgGlyph, isStandalone: true, selector: "ng-glyph", inputs: { name: "name", glyphset: "glyphset", opticalSize: ["opticalSize", "opticalSize", numberAttribute], weight: ["weight", "weight", numberAttribute], grade: ["grade", "grade", numberAttribute], fill: ["fill", "fill", booleanAttribute], size: ["size", "size", coerceCssPixelValue], color: "color" }, host: { properties: { "textContent": "this.name", "style.--ng-glyph__size": "this.size", "style.color": "this.color", "class": "this.glyphsetClass", "style.font-variation-settings": "this.fontVariationSettings" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{display:inline-block;width:var(--ng-glyph__size);height:var(--ng-glyph__size);font-size:var(--ng-glyph__size);overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
114
114
|
}
|
|
115
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
115
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgGlyph, decorators: [{
|
|
116
116
|
type: Component,
|
|
117
117
|
args: [{ selector: 'ng-glyph', standalone: true, template: ``, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;width:var(--ng-glyph__size);height:var(--ng-glyph__size);font-size:var(--ng-glyph__size);overflow:hidden}\n"] }]
|
|
118
118
|
}], propDecorators: { name: [{
|
|
@@ -492,10 +492,10 @@ class NgIcon {
|
|
|
492
492
|
});
|
|
493
493
|
});
|
|
494
494
|
}
|
|
495
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
496
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "
|
|
495
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
496
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0", type: NgIcon, isStandalone: true, selector: "ng-icon", inputs: { name: "name", svg: "svg", size: ["size", "size", coerceCssPixelValue], strokeWidth: "strokeWidth", color: "color" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:inline-block;width:var(--ng-icon__size);height:var(--ng-icon__size);overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
497
497
|
}
|
|
498
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
498
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgIcon, decorators: [{
|
|
499
499
|
type: Component,
|
|
500
500
|
args: [{ selector: 'ng-icon', template: '', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;width:var(--ng-icon__size);height:var(--ng-icon__size);overflow:hidden}\n"] }]
|
|
501
501
|
}], propDecorators: { name: [{
|
|
@@ -525,11 +525,11 @@ class NgIconsModule {
|
|
|
525
525
|
static withIcons(icons) {
|
|
526
526
|
return { ngModule: NgIconsModule, providers: provideIcons(icons) };
|
|
527
527
|
}
|
|
528
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
529
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
530
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
528
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgIconsModule, deps: [{ token: NgIconsToken }], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
529
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: NgIconsModule, imports: [NgIcon], exports: [NgIcon] }); }
|
|
530
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgIconsModule }); }
|
|
531
531
|
}
|
|
532
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
532
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgIconsModule, decorators: [{
|
|
533
533
|
type: NgModule,
|
|
534
534
|
args: [{
|
|
535
535
|
imports: [NgIcon],
|