@ng-icons/core 32.1.0 → 32.3.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 +3 -1
- package/fesm2022/ng-icons-core.mjs +31 -31
- package/fesm2022/ng-icons-core.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,7 +22,7 @@ Currently, we support the following libraries:
|
|
|
22
22
|
- [Feather Icons](https://feathericons.com/)
|
|
23
23
|
- [Jam Icons](https://jam-icons.com/)
|
|
24
24
|
- [Octicons](https://github.com/primer/octicons)
|
|
25
|
-
- [Radix UI Icons](https://
|
|
25
|
+
- [Radix UI Icons](https://www.radix-ui.com/icons)
|
|
26
26
|
- [Tabler Icons](https://tabler-icons.io/)
|
|
27
27
|
- [Akar Icons](https://akaricons.com/)
|
|
28
28
|
- [Iconoir](https://iconoir.com/)
|
|
@@ -48,6 +48,7 @@ Currently, we support the following libraries:
|
|
|
48
48
|
- [MynaUI](https://mynaui.com/icons)
|
|
49
49
|
- [Boxicons](https://boxicons.com/)
|
|
50
50
|
- [Mono Icons](https://icons.mono.company/)
|
|
51
|
+
- [Lucide Icons](https://lucide.dev/)
|
|
51
52
|
|
|
52
53
|
Got suggestions for additional iconsets? Create an issue and we can consider adding them!
|
|
53
54
|
|
|
@@ -131,6 +132,7 @@ The following packages are available:
|
|
|
131
132
|
| `@ng-icons/mynaui` | MIT |
|
|
132
133
|
| `@ng-icons/boxicons` | MIT |
|
|
133
134
|
| `@ng-icons/mono-icons` | MIT |
|
|
135
|
+
| `@ng-icons/lucide` | MIT |
|
|
134
136
|
|
|
135
137
|
## Usage
|
|
136
138
|
|
|
@@ -66,37 +66,37 @@ class NgGlyph {
|
|
|
66
66
|
/**
|
|
67
67
|
* Define the name of the glyph to display
|
|
68
68
|
*/
|
|
69
|
-
this.name = input.required();
|
|
69
|
+
this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
70
70
|
/**
|
|
71
71
|
* Define the glyphset to use
|
|
72
72
|
*/
|
|
73
|
-
this.glyphset = input(this.glyphsets.defaultGlyphset);
|
|
73
|
+
this.glyphset = input(this.glyphsets.defaultGlyphset, ...(ngDevMode ? [{ debugName: "glyphset" }] : []));
|
|
74
74
|
/**
|
|
75
75
|
* Define the optical size of the glyph
|
|
76
76
|
*/
|
|
77
|
-
this.opticalSize = input(this.config.opticalSize, {
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
this.opticalSize = input(this.config.opticalSize, ...(ngDevMode ? [{ debugName: "opticalSize", transform: numberAttribute }] : [{
|
|
78
|
+
transform: numberAttribute,
|
|
79
|
+
}]));
|
|
80
80
|
/**
|
|
81
81
|
* Define the weight of the glyph
|
|
82
82
|
*/
|
|
83
|
-
this.weight = input(this.config.weight, { transform: numberAttribute });
|
|
83
|
+
this.weight = input(this.config.weight, ...(ngDevMode ? [{ debugName: "weight", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
84
84
|
/**
|
|
85
85
|
* Define the grade of the glyph
|
|
86
86
|
*/
|
|
87
|
-
this.grade = input(this.config.grade, { transform: numberAttribute });
|
|
87
|
+
this.grade = input(this.config.grade, ...(ngDevMode ? [{ debugName: "grade", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
88
88
|
/**
|
|
89
89
|
* Define the fill of the glyph
|
|
90
90
|
*/
|
|
91
|
-
this.fill = input(this.config.fill, { transform: booleanAttribute });
|
|
91
|
+
this.fill = input(this.config.fill, ...(ngDevMode ? [{ debugName: "fill", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
92
92
|
/**
|
|
93
93
|
* Define the size of the glyph
|
|
94
94
|
*/
|
|
95
|
-
this.size = input(this.config.size, { transform: coerceCssPixelValue });
|
|
95
|
+
this.size = input(this.config.size, ...(ngDevMode ? [{ debugName: "size", transform: coerceCssPixelValue }] : [{ transform: coerceCssPixelValue }]));
|
|
96
96
|
/**
|
|
97
97
|
* Define the color of the glyph
|
|
98
98
|
*/
|
|
99
|
-
this.color = input(this.config.color);
|
|
99
|
+
this.color = input(this.config.color, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
100
100
|
/**
|
|
101
101
|
* Derive the glyphset class from the glyphset name
|
|
102
102
|
*/
|
|
@@ -106,18 +106,18 @@ class NgGlyph {
|
|
|
106
106
|
throw new Error(`The glyphset "${this.glyphset()}" does not exist. Please provide a valid glyphset.`);
|
|
107
107
|
}
|
|
108
108
|
return glyphset.baseClass;
|
|
109
|
-
});
|
|
109
|
+
}, ...(ngDevMode ? [{ debugName: "glyphsetClass" }] : []));
|
|
110
110
|
/**
|
|
111
111
|
* Define the font variation settings of the glyph
|
|
112
112
|
*/
|
|
113
113
|
this.fontVariationSettings = computed(() => {
|
|
114
114
|
return `'FILL' ${this.fill() ? 1 : 0}, 'wght' ${this.weight()}, 'GRAD' ${this.grade()}, 'opsz' ${this.opticalSize()}`;
|
|
115
|
-
});
|
|
115
|
+
}, ...(ngDevMode ? [{ debugName: "fontVariationSettings" }] : []));
|
|
116
116
|
}
|
|
117
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
118
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.
|
|
117
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NgGlyph, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
118
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: NgGlyph, isStandalone: true, selector: "ng-glyph", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, glyphset: { classPropertyName: "glyphset", publicName: "glyphset", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, grade: { classPropertyName: "grade", publicName: "grade", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "glyphsetClass()", "textContent": "name()", "style.--ng-glyph__size": "size()", "style.color": "color()", "style.font-variation-settings": "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 }); }
|
|
119
119
|
}
|
|
120
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NgGlyph, decorators: [{
|
|
121
121
|
type: Component,
|
|
122
122
|
args: [{ selector: 'ng-glyph', standalone: true, template: ``, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
123
123
|
'[class]': 'glyphsetClass()',
|
|
@@ -360,15 +360,15 @@ class NgIcon {
|
|
|
360
360
|
/** Access the logger */
|
|
361
361
|
this.logger = injectLogger();
|
|
362
362
|
/** Define the name of the icon to display */
|
|
363
|
-
this.name = input();
|
|
363
|
+
this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
|
|
364
364
|
/** Define the svg of the icon to display */
|
|
365
|
-
this.svg = input();
|
|
365
|
+
this.svg = input(...(ngDevMode ? [undefined, { debugName: "svg" }] : []));
|
|
366
366
|
/** Define the size of the icon */
|
|
367
|
-
this.size = input(this.config.size, { transform: coerceCssPixelValue });
|
|
367
|
+
this.size = input(this.config.size, ...(ngDevMode ? [{ debugName: "size", transform: coerceCssPixelValue }] : [{ transform: coerceCssPixelValue }]));
|
|
368
368
|
/** Define the stroke-width of the icon */
|
|
369
|
-
this.strokeWidth = input(this.config.strokeWidth);
|
|
369
|
+
this.strokeWidth = input(this.config.strokeWidth, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
|
|
370
370
|
/** Define the color of the icon */
|
|
371
|
-
this.color = input(this.config.color);
|
|
371
|
+
this.color = input(this.config.color, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
372
372
|
// update the icon anytime the name or svg changes
|
|
373
373
|
effect(() => this.updateIcon());
|
|
374
374
|
const ariaHidden = inject(new HostAttributeToken('aria-hidden'), {
|
|
@@ -512,10 +512,10 @@ class NgIcon {
|
|
|
512
512
|
});
|
|
513
513
|
});
|
|
514
514
|
}
|
|
515
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
516
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.
|
|
515
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NgIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
516
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: NgIcon, isStandalone: true, selector: "ng-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, svg: { classPropertyName: "svg", publicName: "svg", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "style.--ng-icon__stroke-width": "strokeWidth()", "style.--ng-icon__size": "size()", "style.--ng-icon__color": "color()" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:inline-block;width:var(--ng-icon__size, 1em);height:var(--ng-icon__size, 1em);line-height:initial;vertical-align:initial;overflow:hidden}:host ::ng-deep svg{width:inherit;height:inherit;vertical-align:inherit}@layer ng-icon{:host{color:var(--ng-icon__color, currentColor)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
517
517
|
}
|
|
518
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
518
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NgIcon, decorators: [{
|
|
519
519
|
type: Component,
|
|
520
520
|
args: [{ selector: 'ng-icon', template: '', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
521
521
|
role: 'img',
|
|
@@ -539,11 +539,11 @@ class NgIconsModule {
|
|
|
539
539
|
static withIcons(icons) {
|
|
540
540
|
return { ngModule: NgIconsModule, providers: provideIcons(icons) };
|
|
541
541
|
}
|
|
542
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
543
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.
|
|
544
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.
|
|
542
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NgIconsModule, deps: [{ token: NgIconsToken }], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
543
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: NgIconsModule, imports: [NgIcon], exports: [NgIcon] }); }
|
|
544
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NgIconsModule }); }
|
|
545
545
|
}
|
|
546
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
546
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NgIconsModule, decorators: [{
|
|
547
547
|
type: NgModule,
|
|
548
548
|
args: [{
|
|
549
549
|
imports: [NgIcon],
|
|
@@ -558,12 +558,12 @@ const NG_ICON_DIRECTIVES = [NgIcon];
|
|
|
558
558
|
class NgIconStack {
|
|
559
559
|
constructor() {
|
|
560
560
|
/** The size of the child icons */
|
|
561
|
-
this.size = input.required();
|
|
561
|
+
this.size = input.required(...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
562
562
|
}
|
|
563
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
564
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.
|
|
563
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NgIconStack, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
564
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: NgIconStack, isStandalone: true, selector: "ng-icon-stack", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.--ng-icon__size": "size()" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center;position:relative;width:var(--ng-icon__size);height:var(--ng-icon__size)}:host ::ng-deep ng-icon{position:absolute}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
565
565
|
}
|
|
566
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
566
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NgIconStack, decorators: [{
|
|
567
567
|
type: Component,
|
|
568
568
|
args: [{ selector: 'ng-icon-stack', standalone: true, template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
569
569
|
'[style.--ng-icon__size]': 'size()',
|