@hugeicons/angular
Version:
Hugeicons Angular Component Library https://hugeicons.com
101 lines (97 loc) • 4.8 kB
JavaScript
import * as i0 from '@angular/core';
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
class HugeiconsIconComponent {
// Signal inputs - modern Angular 17.1+ approach
size = input(24);
strokeWidth = input(undefined);
absoluteStrokeWidth = input(false);
icon = input.required();
altIcon = input(undefined);
color = input('currentColor');
iconClass = input('', { alias: 'class' });
showAlt = input(false);
// Computed signal for reactive path updates
paths = computed(() => {
const currentIcon = this.showAlt() && this.altIcon() ? this.altIcon() : this.icon();
if (!currentIcon || !Array.isArray(currentIcon)) {
return [];
}
const strokeWidthValue = this.strokeWidth();
const calculatedStrokeWidth = strokeWidthValue !== undefined
? (this.absoluteStrokeWidth()
? (Number(strokeWidthValue) * 24) / Number(this.size())
: strokeWidthValue)
: undefined;
const strokeProps = calculatedStrokeWidth !== undefined
? { strokeWidth: calculatedStrokeWidth, stroke: 'currentColor' }
: {};
return currentIcon.map(([_, attrs]) => ({
d: attrs['d'],
fill: attrs['fill'] || 'none',
opacity: attrs['opacity'],
fillRule: attrs['fillRule'],
...strokeProps
}));
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HugeiconsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: HugeiconsIconComponent, isStandalone: true, selector: "hugeicons-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, absoluteStrokeWidth: { classPropertyName: "absoluteStrokeWidth", publicName: "absoluteStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, altIcon: { classPropertyName: "altIcon", publicName: "altIcon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, showAlt: { classPropertyName: "showAlt", publicName: "showAlt", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: inline-flex; align-items: center; justify-content: center;" }, ngImport: i0, template: `
<svg
[attr.width]="size()"
[attr.height]="size()"
viewBox="0 0 24 24"
fill="none"
[attr.color]="color()"
[class]="iconClass()"
xmlns="http://www.w3.org/2000/svg"
>
@for (path of paths(); track $index) {
<path
[attr.d]="path.d"
[attr.fill]="path.fill"
[attr.opacity]="path.opacity"
[attr.fill-rule]="path.fillRule"
[attr.stroke]="path.stroke"
[attr.stroke-width]="path.strokeWidth"
/>
}
</svg>
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HugeiconsIconComponent, decorators: [{
type: Component,
args: [{
selector: 'hugeicons-icon',
standalone: true,
template: `
<svg
[attr.width]="size()"
[attr.height]="size()"
viewBox="0 0 24 24"
fill="none"
[attr.color]="color()"
[class]="iconClass()"
xmlns="http://www.w3.org/2000/svg"
>
@for (path of paths(); track $index) {
<path
[attr.d]="path.d"
[attr.fill]="path.fill"
[attr.opacity]="path.opacity"
[attr.fill-rule]="path.fillRule"
[attr.stroke]="path.stroke"
[attr.stroke-width]="path.strokeWidth"
/>
}
</svg>
`,
host: {
style: 'display: inline-flex; align-items: center; justify-content: center;'
},
changeDetection: ChangeDetectionStrategy.OnPush
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { HugeiconsIconComponent };
//# sourceMappingURL=hugeicons-angular.mjs.map