@hugeicons/angular
Version:
HugeIcons Pro Angular Component Library https://hugeicons.com
122 lines (118 loc) • 4.33 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class HugeiconsIconComponent {
size = 24;
strokeWidth;
absoluteStrokeWidth = false;
icon;
altIcon;
color = 'currentColor';
class = '';
showAlt = false;
paths = [];
ngOnInit() {
this.updatePaths();
}
ngOnChanges(changes) {
this.updatePaths();
}
updatePaths() {
const currentIcon = this.showAlt && this.altIcon ? this.altIcon : this.icon;
if (!currentIcon || !Array.isArray(currentIcon)) {
this.paths = [];
return;
}
const calculatedStrokeWidth = this.strokeWidth !== undefined
? (this.absoluteStrokeWidth ? (Number(this.strokeWidth) * 24) / Number(this.size) : this.strokeWidth)
: undefined;
const strokeProps = calculatedStrokeWidth !== undefined ? {
strokeWidth: calculatedStrokeWidth,
stroke: 'currentColor'
} : {};
this.paths = currentIcon.map(([_, attrs]) => ({
d: attrs['d'],
fill: attrs['fill'] || 'none',
opacity: attrs['opacity'],
fillRule: attrs['fillRule'],
...strokeProps
}));
}
trackByFn(index) {
return index;
}
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: "14.0.0", version: "17.3.12", type: HugeiconsIconComponent, isStandalone: true, selector: "hugeicons-icon", inputs: { size: "size", strokeWidth: "strokeWidth", absoluteStrokeWidth: "absoluteStrokeWidth", icon: "icon", altIcon: "altIcon", color: "color", class: "class", showAlt: "showAlt" }, usesOnChanges: true, ngImport: i0, template: `
<svg
[attr.width]="size"
[attr.height]="size"
viewBox="0 0 24 24"
fill="none"
[attr.color]="color"
[class]="class"
xmlns="http://www.w3.org/2000/svg"
>
<path
*ngFor="let path of paths; trackBy: trackByFn"
[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, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], 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,
imports: [CommonModule],
template: `
<svg
[attr.width]="size"
[attr.height]="size"
viewBox="0 0 24 24"
fill="none"
[attr.color]="color"
[class]="class"
xmlns="http://www.w3.org/2000/svg"
>
<path
*ngFor="let path of paths; trackBy: trackByFn"
[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>
`,
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], propDecorators: { size: [{
type: Input
}], strokeWidth: [{
type: Input
}], absoluteStrokeWidth: [{
type: Input
}], icon: [{
type: Input
}], altIcon: [{
type: Input
}], color: [{
type: Input
}], class: [{
type: Input
}], showAlt: [{
type: Input
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { HugeiconsIconComponent };
//# sourceMappingURL=hugeicons-angular.mjs.map