@hugeicons/angular
Version:
Hugeicons Angular Component Library https://hugeicons.com
93 lines • 10.7 kB
JavaScript
import { Component, ChangeDetectionStrategy, computed, input } from '@angular/core';
import * as i0 from "@angular/core";
export 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
}]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHVnZWljb25zLWljb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvaHVnZWljb25zLWljb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsdUJBQXVCLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUEwQ3BGLE1BQU0sT0FBTyxzQkFBc0I7SUFDakMsZ0RBQWdEO0lBQ3ZDLElBQUksR0FBRyxLQUFLLENBQWtCLEVBQUUsQ0FBQyxDQUFDO0lBQ2xDLFdBQVcsR0FBRyxLQUFLLENBQXFCLFNBQVMsQ0FBQyxDQUFDO0lBQ25ELG1CQUFtQixHQUFHLEtBQUssQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUM1QyxJQUFJLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBaUIsQ0FBQztJQUN2QyxPQUFPLEdBQUcsS0FBSyxDQUE0QixTQUFTLENBQUMsQ0FBQztJQUN0RCxLQUFLLEdBQUcsS0FBSyxDQUFTLGNBQWMsQ0FBQyxDQUFDO0lBQ3RDLFNBQVMsR0FBRyxLQUFLLENBQVMsRUFBRSxFQUFFLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRSxDQUFDLENBQUM7SUFDbEQsT0FBTyxHQUFHLEtBQUssQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUV6Qyw0Q0FBNEM7SUFDbkMsS0FBSyxHQUFHLFFBQVEsQ0FBYSxHQUFHLEVBQUU7UUFDekMsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRSxJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7UUFFckYsSUFBSSxDQUFDLFdBQVcsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsV0FBVyxDQUFDLEVBQUU7WUFDL0MsT0FBTyxFQUFFLENBQUM7U0FDWDtRQUVELE1BQU0sZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQzVDLE1BQU0scUJBQXFCLEdBQUcsZ0JBQWdCLEtBQUssU0FBUztZQUMxRCxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsbUJBQW1CLEVBQUU7Z0JBQ3pCLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7Z0JBQ3ZELENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQztZQUN2QixDQUFDLENBQUMsU0FBUyxDQUFDO1FBRWQsTUFBTSxXQUFXLEdBQUcscUJBQXFCLEtBQUssU0FBUztZQUNyRCxDQUFDLENBQUMsRUFBRSxXQUFXLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxFQUFFLGNBQWMsRUFBRTtZQUNoRSxDQUFDLENBQUMsRUFBRSxDQUFDO1FBRVAsT0FBTyxXQUFXLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsS0FBSyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7WUFDdEMsQ0FBQyxFQUFFLEtBQUssQ0FBQyxHQUFHLENBQUM7WUFDYixJQUFJLEVBQUUsS0FBSyxDQUFDLE1BQU0sQ0FBQyxJQUFJLE1BQU07WUFDN0IsT0FBTyxFQUFFLEtBQUssQ0FBQyxTQUFTLENBQUM7WUFDekIsUUFBUSxFQUFFLEtBQUssQ0FBQyxVQUFVLENBQUM7WUFDM0IsR0FBRyxXQUFXO1NBQ2YsQ0FBQyxDQUFDLENBQUM7SUFDTixDQUFDLENBQUMsQ0FBQzt3R0FyQ1Esc0JBQXNCOzRGQUF0QixzQkFBc0IsZ3NDQTNCdkI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXFCVDs7NEZBTVUsc0JBQXNCO2tCQTlCbEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixVQUFVLEVBQUUsSUFBSTtvQkFDaEIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FxQlQ7b0JBQ0QsSUFBSSxFQUFFO3dCQUNKLEtBQUssRUFBRSxxRUFBcUU7cUJBQzdFO29CQUNELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2lCQUNoRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIGNvbXB1dGVkLCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSWNvblN2Z09iamVjdCB9IGZyb20gJy4uL2xpYi90eXBlcyc7XG5cbmludGVyZmFjZSBQYXRoRGF0YSB7XG4gIGQ6IHN0cmluZztcbiAgZmlsbDogc3RyaW5nO1xuICBvcGFjaXR5Pzogc3RyaW5nO1xuICBmaWxsUnVsZT86IHN0cmluZztcbiAgc3Ryb2tlPzogc3RyaW5nO1xuICBzdHJva2VXaWR0aD86IG51bWJlcjtcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnaHVnZWljb25zLWljb24nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxzdmdcbiAgICAgIFthdHRyLndpZHRoXT1cInNpemUoKVwiXG4gICAgICBbYXR0ci5oZWlnaHRdPVwic2l6ZSgpXCJcbiAgICAgIHZpZXdCb3g9XCIwIDAgMjQgMjRcIlxuICAgICAgZmlsbD1cIm5vbmVcIlxuICAgICAgW2F0dHIuY29sb3JdPVwiY29sb3IoKVwiXG4gICAgICBbY2xhc3NdPVwiaWNvbkNsYXNzKClcIlxuICAgICAgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiXG4gICAgPlxuICAgICAgQGZvciAocGF0aCBvZiBwYXRocygpOyB0cmFjayAkaW5kZXgpIHtcbiAgICAgICAgPHBhdGhcbiAgICAgICAgICBbYXR0ci5kXT1cInBhdGguZFwiXG4gICAgICAgICAgW2F0dHIuZmlsbF09XCJwYXRoLmZpbGxcIlxuICAgICAgICAgIFthdHRyLm9wYWNpdHldPVwicGF0aC5vcGFjaXR5XCJcbiAgICAgICAgICBbYXR0ci5maWxsLXJ1bGVdPVwicGF0aC5maWxsUnVsZVwiXG4gICAgICAgICAgW2F0dHIuc3Ryb2tlXT1cInBhdGguc3Ryb2tlXCJcbiAgICAgICAgICBbYXR0ci5zdHJva2Utd2lkdGhdPVwicGF0aC5zdHJva2VXaWR0aFwiXG4gICAgICAgIC8+XG4gICAgICB9XG4gICAgPC9zdmc+XG4gIGAsXG4gIGhvc3Q6IHtcbiAgICBzdHlsZTogJ2Rpc3BsYXk6IGlubGluZS1mbGV4OyBhbGlnbi1pdGVtczogY2VudGVyOyBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsnXG4gIH0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIEh1Z2VpY29uc0ljb25Db21wb25lbnQge1xuICAvLyBTaWduYWwgaW5wdXRzIC0gbW9kZXJuIEFuZ3VsYXIgMTcuMSsgYXBwcm9hY2hcbiAgcmVhZG9ubHkgc2l6ZSA9IGlucHV0PHN0cmluZyB8IG51bWJlcj4oMjQpO1xuICByZWFkb25seSBzdHJva2VXaWR0aCA9IGlucHV0PG51bWJlciB8IHVuZGVmaW5lZD4odW5kZWZpbmVkKTtcbiAgcmVhZG9ubHkgYWJzb2x1dGVTdHJva2VXaWR0aCA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcbiAgcmVhZG9ubHkgaWNvbiA9IGlucHV0LnJlcXVpcmVkPEljb25TdmdPYmplY3Q+KCk7XG4gIHJlYWRvbmx5IGFsdEljb24gPSBpbnB1dDxJY29uU3ZnT2JqZWN0IHwgdW5kZWZpbmVkPih1bmRlZmluZWQpO1xuICByZWFkb25seSBjb2xvciA9IGlucHV0PHN0cmluZz4oJ2N1cnJlbnRDb2xvcicpO1xuICByZWFkb25seSBpY29uQ2xhc3MgPSBpbnB1dDxzdHJpbmc+KCcnLCB7IGFsaWFzOiAnY2xhc3MnIH0pO1xuICByZWFkb25seSBzaG93QWx0ID0gaW5wdXQ8Ym9vbGVhbj4oZmFsc2UpO1xuXG4gIC8vIENvbXB1dGVkIHNpZ25hbCBmb3IgcmVhY3RpdmUgcGF0aCB1cGRhdGVzXG4gIHJlYWRvbmx5IHBhdGhzID0gY29tcHV0ZWQ8UGF0aERhdGFbXT4oKCkgPT4ge1xuICAgIGNvbnN0IGN1cnJlbnRJY29uID0gdGhpcy5zaG93QWx0KCkgJiYgdGhpcy5hbHRJY29uKCkgPyB0aGlzLmFsdEljb24oKSEgOiB0aGlzLmljb24oKTtcblxuICAgIGlmICghY3VycmVudEljb24gfHwgIUFycmF5LmlzQXJyYXkoY3VycmVudEljb24pKSB7XG4gICAgICByZXR1cm4gW107XG4gICAgfVxuXG4gICAgY29uc3Qgc3Ryb2tlV2lkdGhWYWx1ZSA9IHRoaXMuc3Ryb2tlV2lkdGgoKTtcbiAgICBjb25zdCBjYWxjdWxhdGVkU3Ryb2tlV2lkdGggPSBzdHJva2VXaWR0aFZhbHVlICE9PSB1bmRlZmluZWRcbiAgICAgID8gKHRoaXMuYWJzb2x1dGVTdHJva2VXaWR0aCgpIFxuICAgICAgICAgID8gKE51bWJlcihzdHJva2VXaWR0aFZhbHVlKSAqIDI0KSAvIE51bWJlcih0aGlzLnNpemUoKSkgXG4gICAgICAgICAgOiBzdHJva2VXaWR0aFZhbHVlKVxuICAgICAgOiB1bmRlZmluZWQ7XG5cbiAgICBjb25zdCBzdHJva2VQcm9wcyA9IGNhbGN1bGF0ZWRTdHJva2VXaWR0aCAhPT0gdW5kZWZpbmVkIFxuICAgICAgPyB7IHN0cm9rZVdpZHRoOiBjYWxjdWxhdGVkU3Ryb2tlV2lkdGgsIHN0cm9rZTogJ2N1cnJlbnRDb2xvcicgfSBcbiAgICAgIDoge307XG5cbiAgICByZXR1cm4gY3VycmVudEljb24ubWFwKChbXywgYXR0cnNdKSA9PiAoe1xuICAgICAgZDogYXR0cnNbJ2QnXSxcbiAgICAgIGZpbGw6IGF0dHJzWydmaWxsJ10gfHwgJ25vbmUnLFxuICAgICAgb3BhY2l0eTogYXR0cnNbJ29wYWNpdHknXSxcbiAgICAgIGZpbGxSdWxlOiBhdHRyc1snZmlsbFJ1bGUnXSxcbiAgICAgIC4uLnN0cm9rZVByb3BzXG4gICAgfSkpO1xuICB9KTtcbn0iXX0=