@hugeicons/angular 1.0.1 → 1.0.4
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 +6 -2
- package/dist/README.md +6 -2
- package/dist/components/hugeicons-icon.component.d.ts +5 -2
- package/dist/esm2022/components/hugeicons-icon.component.mjs +18 -4
- package/dist/esm2022/lib/types.mjs +1 -1
- package/dist/fesm2022/hugeicons-angular.mjs +17 -3
- package/dist/fesm2022/hugeicons-angular.mjs.map +1 -1
- package/dist/lib/types.d.ts +1 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
|
|
7
7
|
## What is HugeIcons?
|
|
8
8
|
|
|
9
|
-
HugeIcons is a comprehensive icon library designed for modern web and mobile applications. The free package includes 4,
|
|
9
|
+
HugeIcons is a comprehensive icon library designed for modern web and mobile applications. The free package includes 4,400+ carefully crafted icons in the Stroke Rounded style, while the pro version offers over 40,000 icons across 9 unique styles.
|
|
10
10
|
|
|
11
11
|
### Key Highlights
|
|
12
|
-
- **4,
|
|
12
|
+
- **4,400+ Free Icons**: Extensive collection of Stroke Rounded icons covering essential UI elements, actions, and concepts
|
|
13
13
|
- **Pixel Perfect**: Every icon is crafted on a 24x24 pixel grid ensuring crisp, clear display at any size
|
|
14
14
|
- **Customizable**: Easily adjust colors, sizes, and styles to match your design needs
|
|
15
15
|
- **Regular Updates**: New icons added regularly to keep up with evolving design trends
|
|
@@ -108,6 +108,7 @@ export class YourComponent {
|
|
|
108
108
|
| `icon` | `[string, Record<string, any>][]` | Required | The main icon to display (array of SVG elements and their attributes) |
|
|
109
109
|
| `size` | `number \| string` | `24` | Icon size in pixels. Must be a positive number. String values will be parsed to numbers |
|
|
110
110
|
| `strokeWidth` | `number \| undefined` | `undefined` | Width of the icon strokes (works with stroke-style icons) |
|
|
111
|
+
| `absoluteStrokeWidth` | `boolean` | `false` | When true, stroke width is scaled based on icon size (24px base). When false, stroke width is used as-is |
|
|
111
112
|
| `altIcon` | `[string, Record<string, any>][]` | `undefined` | Alternative icon that can be used for states, interactions, or animations |
|
|
112
113
|
| `showAlt` | `boolean` | `false` | When true, displays the altIcon instead of the main icon |
|
|
113
114
|
| `color` | `string` | `currentColor` | Icon color (CSS color value) |
|
|
@@ -116,6 +117,7 @@ Note:
|
|
|
116
117
|
- The component accepts all standard SVG attributes which will be passed to the root SVG element.
|
|
117
118
|
- The `size` input accepts both numbers and strings, but strings will be parsed to numbers and must result in a positive number.
|
|
118
119
|
- Icon arrays are tuples of `[elementName: string, attributes: Record<string, any>][]` representing SVG elements.
|
|
120
|
+
- When `absoluteStrokeWidth` is true, the stroke width is scaled proportionally to the icon size (based on a 24px base size).
|
|
119
121
|
|
|
120
122
|
## Examples
|
|
121
123
|
|
|
@@ -149,6 +151,8 @@ import { NotificationIcon } from '@hugeicons/core-free-icons';
|
|
|
149
151
|
[icon]="icon"
|
|
150
152
|
[size]="32"
|
|
151
153
|
color="#FF5733"
|
|
154
|
+
[strokeWidth]="2"
|
|
155
|
+
[absoluteStrokeWidth]="true"
|
|
152
156
|
></hugeicons-icon>
|
|
153
157
|
`
|
|
154
158
|
})
|
package/dist/README.md
CHANGED
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
|
|
7
7
|
## What is HugeIcons?
|
|
8
8
|
|
|
9
|
-
HugeIcons is a comprehensive icon library designed for modern web and mobile applications. The free package includes 4,
|
|
9
|
+
HugeIcons is a comprehensive icon library designed for modern web and mobile applications. The free package includes 4,400+ carefully crafted icons in the Stroke Rounded style, while the pro version offers over 40,000 icons across 9 unique styles.
|
|
10
10
|
|
|
11
11
|
### Key Highlights
|
|
12
|
-
- **4,
|
|
12
|
+
- **4,400+ Free Icons**: Extensive collection of Stroke Rounded icons covering essential UI elements, actions, and concepts
|
|
13
13
|
- **Pixel Perfect**: Every icon is crafted on a 24x24 pixel grid ensuring crisp, clear display at any size
|
|
14
14
|
- **Customizable**: Easily adjust colors, sizes, and styles to match your design needs
|
|
15
15
|
- **Regular Updates**: New icons added regularly to keep up with evolving design trends
|
|
@@ -108,6 +108,7 @@ export class YourComponent {
|
|
|
108
108
|
| `icon` | `[string, Record<string, any>][]` | Required | The main icon to display (array of SVG elements and their attributes) |
|
|
109
109
|
| `size` | `number \| string` | `24` | Icon size in pixels. Must be a positive number. String values will be parsed to numbers |
|
|
110
110
|
| `strokeWidth` | `number \| undefined` | `undefined` | Width of the icon strokes (works with stroke-style icons) |
|
|
111
|
+
| `absoluteStrokeWidth` | `boolean` | `false` | When true, stroke width is scaled based on icon size (24px base). When false, stroke width is used as-is |
|
|
111
112
|
| `altIcon` | `[string, Record<string, any>][]` | `undefined` | Alternative icon that can be used for states, interactions, or animations |
|
|
112
113
|
| `showAlt` | `boolean` | `false` | When true, displays the altIcon instead of the main icon |
|
|
113
114
|
| `color` | `string` | `currentColor` | Icon color (CSS color value) |
|
|
@@ -116,6 +117,7 @@ Note:
|
|
|
116
117
|
- The component accepts all standard SVG attributes which will be passed to the root SVG element.
|
|
117
118
|
- The `size` input accepts both numbers and strings, but strings will be parsed to numbers and must result in a positive number.
|
|
118
119
|
- Icon arrays are tuples of `[elementName: string, attributes: Record<string, any>][]` representing SVG elements.
|
|
120
|
+
- When `absoluteStrokeWidth` is true, the stroke width is scaled proportionally to the icon size (based on a 24px base size).
|
|
119
121
|
|
|
120
122
|
## Examples
|
|
121
123
|
|
|
@@ -149,6 +151,8 @@ import { NotificationIcon } from '@hugeicons/core-free-icons';
|
|
|
149
151
|
[icon]="icon"
|
|
150
152
|
[size]="32"
|
|
151
153
|
color="#FF5733"
|
|
154
|
+
[strokeWidth]="2"
|
|
155
|
+
[absoluteStrokeWidth]="true"
|
|
152
156
|
></hugeicons-icon>
|
|
153
157
|
`
|
|
154
158
|
})
|
|
@@ -3,7 +3,8 @@ import { IconSvgObject } from '../lib/types';
|
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export declare class HugeiconsIconComponent implements OnInit, OnChanges {
|
|
5
5
|
size: string | number;
|
|
6
|
-
strokeWidth
|
|
6
|
+
strokeWidth?: number;
|
|
7
|
+
absoluteStrokeWidth: boolean;
|
|
7
8
|
icon: IconSvgObject;
|
|
8
9
|
altIcon?: IconSvgObject;
|
|
9
10
|
color: string;
|
|
@@ -14,11 +15,13 @@ export declare class HugeiconsIconComponent implements OnInit, OnChanges {
|
|
|
14
15
|
fill: string;
|
|
15
16
|
opacity?: string;
|
|
16
17
|
fillRule?: string;
|
|
18
|
+
stroke?: string;
|
|
19
|
+
strokeWidth?: number;
|
|
17
20
|
}>;
|
|
18
21
|
ngOnInit(): void;
|
|
19
22
|
ngOnChanges(changes: SimpleChanges): void;
|
|
20
23
|
private updatePaths;
|
|
21
24
|
trackByFn(index: number): number;
|
|
22
25
|
static ɵfac: i0.ɵɵFactoryDeclaration<HugeiconsIconComponent, never>;
|
|
23
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<HugeiconsIconComponent, "hugeicons-icon", never, { "size": { "alias": "size"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "altIcon": { "alias": "altIcon"; "required": false; }; "color": { "alias": "color"; "required": false; }; "class": { "alias": "class"; "required": false; }; "showAlt": { "alias": "showAlt"; "required": false; }; }, {}, never, never, true, never>;
|
|
26
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<HugeiconsIconComponent, "hugeicons-icon", never, { "size": { "alias": "size"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "absoluteStrokeWidth": { "alias": "absoluteStrokeWidth"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "altIcon": { "alias": "altIcon"; "required": false; }; "color": { "alias": "color"; "required": false; }; "class": { "alias": "class"; "required": false; }; "showAlt": { "alias": "showAlt"; "required": false; }; }, {}, never, never, true, never>;
|
|
24
27
|
}
|
|
@@ -4,7 +4,8 @@ import * as i0 from "@angular/core";
|
|
|
4
4
|
import * as i1 from "@angular/common";
|
|
5
5
|
export class HugeiconsIconComponent {
|
|
6
6
|
size = 24;
|
|
7
|
-
strokeWidth
|
|
7
|
+
strokeWidth;
|
|
8
|
+
absoluteStrokeWidth = false;
|
|
8
9
|
icon;
|
|
9
10
|
altIcon;
|
|
10
11
|
color = 'currentColor';
|
|
@@ -23,19 +24,26 @@ export class HugeiconsIconComponent {
|
|
|
23
24
|
this.paths = [];
|
|
24
25
|
return;
|
|
25
26
|
}
|
|
27
|
+
const calculatedStrokeWidth = this.strokeWidth !== undefined
|
|
28
|
+
? (this.absoluteStrokeWidth ? (Number(this.strokeWidth) * 24) / Number(this.size) : this.strokeWidth)
|
|
29
|
+
: undefined;
|
|
30
|
+
const strokeProps = calculatedStrokeWidth !== undefined ? {
|
|
31
|
+
strokeWidth: calculatedStrokeWidth,
|
|
32
|
+
stroke: 'currentColor'
|
|
33
|
+
} : {};
|
|
26
34
|
this.paths = currentIcon.map(([_, attrs]) => ({
|
|
27
35
|
d: attrs['d'],
|
|
28
36
|
fill: attrs['fill'] || 'none',
|
|
29
37
|
opacity: attrs['opacity'],
|
|
30
38
|
fillRule: attrs['fillRule'],
|
|
31
|
-
|
|
39
|
+
...strokeProps
|
|
32
40
|
}));
|
|
33
41
|
}
|
|
34
42
|
trackByFn(index) {
|
|
35
43
|
return index;
|
|
36
44
|
}
|
|
37
45
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HugeiconsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
38
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HugeiconsIconComponent, isStandalone: true, selector: "hugeicons-icon", inputs: { size: "size", strokeWidth: "strokeWidth", icon: "icon", altIcon: "altIcon", color: "color", class: "class", showAlt: "showAlt" }, usesOnChanges: true, ngImport: i0, template: `
|
|
46
|
+
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: `
|
|
39
47
|
<svg
|
|
40
48
|
[attr.width]="size"
|
|
41
49
|
[attr.height]="size"
|
|
@@ -51,6 +59,8 @@ export class HugeiconsIconComponent {
|
|
|
51
59
|
[attr.fill]="path.fill"
|
|
52
60
|
[attr.opacity]="path.opacity"
|
|
53
61
|
[attr.fill-rule]="path.fillRule"
|
|
62
|
+
[attr.stroke]="path.stroke"
|
|
63
|
+
[attr.stroke-width]="path.strokeWidth"
|
|
54
64
|
/>
|
|
55
65
|
</svg>
|
|
56
66
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
@@ -77,6 +87,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
77
87
|
[attr.fill]="path.fill"
|
|
78
88
|
[attr.opacity]="path.opacity"
|
|
79
89
|
[attr.fill-rule]="path.fillRule"
|
|
90
|
+
[attr.stroke]="path.stroke"
|
|
91
|
+
[attr.stroke-width]="path.strokeWidth"
|
|
80
92
|
/>
|
|
81
93
|
</svg>
|
|
82
94
|
`,
|
|
@@ -86,6 +98,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
86
98
|
type: Input
|
|
87
99
|
}], strokeWidth: [{
|
|
88
100
|
type: Input
|
|
101
|
+
}], absoluteStrokeWidth: [{
|
|
102
|
+
type: Input
|
|
89
103
|
}], icon: [{
|
|
90
104
|
type: Input
|
|
91
105
|
}], altIcon: [{
|
|
@@ -97,4 +111,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
97
111
|
}], showAlt: [{
|
|
98
112
|
type: Input
|
|
99
113
|
}] } });
|
|
100
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
114
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHVnZWljb25zLWljb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvaHVnZWljb25zLWljb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLHVCQUF1QixFQUFvQyxNQUFNLGVBQWUsQ0FBQztBQUM1RyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7OztBQStCL0MsTUFBTSxPQUFPLHNCQUFzQjtJQUN4QixJQUFJLEdBQW9CLEVBQUUsQ0FBQztJQUMzQixXQUFXLENBQVU7SUFDckIsbUJBQW1CLEdBQUcsS0FBSyxDQUFDO0lBQzVCLElBQUksQ0FBaUI7SUFDckIsT0FBTyxDQUFpQjtJQUN4QixLQUFLLEdBQUcsY0FBYyxDQUFDO0lBQ3ZCLEtBQUssR0FBRyxFQUFFLENBQUM7SUFDWCxPQUFPLEdBQUcsS0FBSyxDQUFDO0lBRXpCLEtBQUssR0FPQSxFQUFFLENBQUM7SUFFUixRQUFRO1FBQ04sSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFTyxXQUFXO1FBQ2pCLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQztRQUU1RSxJQUFJLENBQUMsV0FBVyxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxXQUFXLENBQUMsRUFBRTtZQUMvQyxJQUFJLENBQUMsS0FBSyxHQUFHLEVBQUUsQ0FBQztZQUNoQixPQUFPO1NBQ1I7UUFFRCxNQUFNLHFCQUFxQixHQUFHLElBQUksQ0FBQyxXQUFXLEtBQUssU0FBUztZQUMxRCxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsbUJBQW1CLENBQUMsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsR0FBRyxFQUFFLENBQUMsR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDO1lBQ3JHLENBQUMsQ0FBQyxTQUFTLENBQUM7UUFFZCxNQUFNLFdBQVcsR0FBRyxxQkFBcUIsS0FBSyxTQUFTLENBQUMsQ0FBQyxDQUFDO1lBQ3hELFdBQVcsRUFBRSxxQkFBcUI7WUFDbEMsTUFBTSxFQUFFLGNBQWM7U0FDdkIsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1FBRVAsSUFBSSxDQUFDLEtBQUssR0FBRyxXQUFXLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsS0FBSyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7WUFDNUMsQ0FBQyxFQUFFLEtBQUssQ0FBQyxHQUFHLENBQUM7WUFDYixJQUFJLEVBQUUsS0FBSyxDQUFDLE1BQU0sQ0FBQyxJQUFJLE1BQU07WUFDN0IsT0FBTyxFQUFFLEtBQUssQ0FBQyxTQUFTLENBQUM7WUFDekIsUUFBUSxFQUFFLEtBQUssQ0FBQyxVQUFVLENBQUM7WUFDM0IsR0FBRyxXQUFXO1NBQ2YsQ0FBQyxDQUFDLENBQUM7SUFDTixDQUFDO0lBRUQsU0FBUyxDQUFDLEtBQWE7UUFDckIsT0FBTyxLQUFLLENBQUM7SUFDZixDQUFDO3dHQXZEVSxzQkFBc0I7NEZBQXRCLHNCQUFzQix1UkF4QnZCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW9CVCwyREFyQlMsWUFBWTs7NEZBeUJYLHNCQUFzQjtrQkE1QmxDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGdCQUFnQjtvQkFDMUIsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLE9BQU8sRUFBRSxDQUFDLFlBQVksQ0FBQztvQkFDdkIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW9CVDtvQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtpQkFDaEQ7OEJBR1UsSUFBSTtzQkFBWixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csbUJBQW1CO3NCQUEzQixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgT25Jbml0LCBPbkNoYW5nZXMsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBJY29uU3ZnT2JqZWN0IH0gZnJvbSAnLi4vbGliL3R5cGVzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnaHVnZWljb25zLWljb24nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgdGVtcGxhdGU6IGBcbiAgICA8c3ZnXG4gICAgICBbYXR0ci53aWR0aF09XCJzaXplXCJcbiAgICAgIFthdHRyLmhlaWdodF09XCJzaXplXCJcbiAgICAgIHZpZXdCb3g9XCIwIDAgMjQgMjRcIlxuICAgICAgZmlsbD1cIm5vbmVcIlxuICAgICAgW2F0dHIuY29sb3JdPVwiY29sb3JcIlxuICAgICAgW2NsYXNzXT1cImNsYXNzXCJcbiAgICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxuICAgID5cbiAgICAgIDxwYXRoXG4gICAgICAgICpuZ0Zvcj1cImxldCBwYXRoIG9mIHBhdGhzOyB0cmFja0J5OiB0cmFja0J5Rm5cIlxuICAgICAgICBbYXR0ci5kXT1cInBhdGguZFwiXG4gICAgICAgIFthdHRyLmZpbGxdPVwicGF0aC5maWxsXCJcbiAgICAgICAgW2F0dHIub3BhY2l0eV09XCJwYXRoLm9wYWNpdHlcIlxuICAgICAgICBbYXR0ci5maWxsLXJ1bGVdPVwicGF0aC5maWxsUnVsZVwiXG4gICAgICAgIFthdHRyLnN0cm9rZV09XCJwYXRoLnN0cm9rZVwiXG4gICAgICAgIFthdHRyLnN0cm9rZS13aWR0aF09XCJwYXRoLnN0cm9rZVdpZHRoXCJcbiAgICAgIC8+XG4gICAgPC9zdmc+XG4gIGAsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuXG5leHBvcnQgY2xhc3MgSHVnZWljb25zSWNvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgc2l6ZTogc3RyaW5nIHwgbnVtYmVyID0gMjQ7XG4gIEBJbnB1dCgpIHN0cm9rZVdpZHRoPzogbnVtYmVyO1xuICBASW5wdXQoKSBhYnNvbHV0ZVN0cm9rZVdpZHRoID0gZmFsc2U7XG4gIEBJbnB1dCgpIGljb24hOiBJY29uU3ZnT2JqZWN0O1xuICBASW5wdXQoKSBhbHRJY29uPzogSWNvblN2Z09iamVjdDtcbiAgQElucHV0KCkgY29sb3IgPSAnY3VycmVudENvbG9yJztcbiAgQElucHV0KCkgY2xhc3MgPSAnJztcbiAgQElucHV0KCkgc2hvd0FsdCA9IGZhbHNlO1xuXG4gIHBhdGhzOiBBcnJheTx7XG4gICAgZDogc3RyaW5nO1xuICAgIGZpbGw6IHN0cmluZztcbiAgICBvcGFjaXR5Pzogc3RyaW5nO1xuICAgIGZpbGxSdWxlPzogc3RyaW5nO1xuICAgIHN0cm9rZT86IHN0cmluZztcbiAgICBzdHJva2VXaWR0aD86IG51bWJlcjtcbiAgfT4gPSBbXTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnVwZGF0ZVBhdGhzKCk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgdGhpcy51cGRhdGVQYXRocygpO1xuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGVQYXRocygpIHtcbiAgICBjb25zdCBjdXJyZW50SWNvbiA9IHRoaXMuc2hvd0FsdCAmJiB0aGlzLmFsdEljb24gPyB0aGlzLmFsdEljb24gOiB0aGlzLmljb247XG5cbiAgICBpZiAoIWN1cnJlbnRJY29uIHx8ICFBcnJheS5pc0FycmF5KGN1cnJlbnRJY29uKSkge1xuICAgICAgdGhpcy5wYXRocyA9IFtdO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGNvbnN0IGNhbGN1bGF0ZWRTdHJva2VXaWR0aCA9IHRoaXMuc3Ryb2tlV2lkdGggIT09IHVuZGVmaW5lZFxuICAgICAgPyAodGhpcy5hYnNvbHV0ZVN0cm9rZVdpZHRoID8gKE51bWJlcih0aGlzLnN0cm9rZVdpZHRoKSAqIDI0KSAvIE51bWJlcih0aGlzLnNpemUpIDogdGhpcy5zdHJva2VXaWR0aClcbiAgICAgIDogdW5kZWZpbmVkO1xuXG4gICAgY29uc3Qgc3Ryb2tlUHJvcHMgPSBjYWxjdWxhdGVkU3Ryb2tlV2lkdGggIT09IHVuZGVmaW5lZCA/IHtcbiAgICAgIHN0cm9rZVdpZHRoOiBjYWxjdWxhdGVkU3Ryb2tlV2lkdGgsXG4gICAgICBzdHJva2U6ICdjdXJyZW50Q29sb3InXG4gICAgfSA6IHt9O1xuXG4gICAgdGhpcy5wYXRocyA9IGN1cnJlbnRJY29uLm1hcCgoW18sIGF0dHJzXSkgPT4gKHtcbiAgICAgIGQ6IGF0dHJzWydkJ10sXG4gICAgICBmaWxsOiBhdHRyc1snZmlsbCddIHx8ICdub25lJyxcbiAgICAgIG9wYWNpdHk6IGF0dHJzWydvcGFjaXR5J10sXG4gICAgICBmaWxsUnVsZTogYXR0cnNbJ2ZpbGxSdWxlJ10sXG4gICAgICAuLi5zdHJva2VQcm9wc1xuICAgIH0pKTtcbiAgfVxuXG4gIHRyYWNrQnlGbihpbmRleDogbnVtYmVyKSB7XG4gICAgcmV0dXJuIGluZGV4O1xuICB9XG59Il19
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL3R5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgdHlwZSBJY29uU3ZnT2JqZWN0ID0gcmVhZG9ubHkgKHJlYWRvbmx5IFtzdHJpbmcsIFJlY29yZDxzdHJpbmcsIGFueT5dKVtdO1xuXG5leHBvcnQgdHlwZSBJY29uTmFtZSA9IHN0cmluZztcblxuZXhwb3J0IGludGVyZmFjZSBJY29uTWV0YWRhdGEge1xuICBuYW1lOiBJY29uTmFtZTtcbiAgY2F0ZWdvcnk6IHN0cmluZztcbiAgdGFnczogc3RyaW5nW107XG4gIHBhY2s6IHN0cmluZztcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJY29uRGF0YSB7XG4gIGljb246IEljb25TdmdPYmplY3Q7XG4gIG1ldGFkYXRhOiBJY29uTWV0YWRhdGE7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSHVnZWljb25zUHJvcHMge1xuICBzaXplPzogc3RyaW5nIHwgbnVtYmVyO1xuICBzdHJva2VXaWR0aD86IG51bWJlcjtcbiAgYWJzb2x1dGVTdHJva2VXaWR0aD86IGJvb2xlYW47XG4gIGljb246IEljb25TdmdPYmplY3Q7XG4gIGFsdEljb24/OiBJY29uU3ZnT2JqZWN0O1xuICBjb2xvcj86IHN0cmluZztcbiAgY2xhc3M/OiBzdHJpbmc7XG4gIHNob3dBbHQ/OiBib29sZWFuO1xufSAiXX0=
|
|
@@ -5,7 +5,8 @@ import { CommonModule } from '@angular/common';
|
|
|
5
5
|
|
|
6
6
|
class HugeiconsIconComponent {
|
|
7
7
|
size = 24;
|
|
8
|
-
strokeWidth
|
|
8
|
+
strokeWidth;
|
|
9
|
+
absoluteStrokeWidth = false;
|
|
9
10
|
icon;
|
|
10
11
|
altIcon;
|
|
11
12
|
color = 'currentColor';
|
|
@@ -24,19 +25,26 @@ class HugeiconsIconComponent {
|
|
|
24
25
|
this.paths = [];
|
|
25
26
|
return;
|
|
26
27
|
}
|
|
28
|
+
const calculatedStrokeWidth = this.strokeWidth !== undefined
|
|
29
|
+
? (this.absoluteStrokeWidth ? (Number(this.strokeWidth) * 24) / Number(this.size) : this.strokeWidth)
|
|
30
|
+
: undefined;
|
|
31
|
+
const strokeProps = calculatedStrokeWidth !== undefined ? {
|
|
32
|
+
strokeWidth: calculatedStrokeWidth,
|
|
33
|
+
stroke: 'currentColor'
|
|
34
|
+
} : {};
|
|
27
35
|
this.paths = currentIcon.map(([_, attrs]) => ({
|
|
28
36
|
d: attrs['d'],
|
|
29
37
|
fill: attrs['fill'] || 'none',
|
|
30
38
|
opacity: attrs['opacity'],
|
|
31
39
|
fillRule: attrs['fillRule'],
|
|
32
|
-
|
|
40
|
+
...strokeProps
|
|
33
41
|
}));
|
|
34
42
|
}
|
|
35
43
|
trackByFn(index) {
|
|
36
44
|
return index;
|
|
37
45
|
}
|
|
38
46
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HugeiconsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
39
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HugeiconsIconComponent, isStandalone: true, selector: "hugeicons-icon", inputs: { size: "size", strokeWidth: "strokeWidth", icon: "icon", altIcon: "altIcon", color: "color", class: "class", showAlt: "showAlt" }, usesOnChanges: true, ngImport: i0, template: `
|
|
47
|
+
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: `
|
|
40
48
|
<svg
|
|
41
49
|
[attr.width]="size"
|
|
42
50
|
[attr.height]="size"
|
|
@@ -52,6 +60,8 @@ class HugeiconsIconComponent {
|
|
|
52
60
|
[attr.fill]="path.fill"
|
|
53
61
|
[attr.opacity]="path.opacity"
|
|
54
62
|
[attr.fill-rule]="path.fillRule"
|
|
63
|
+
[attr.stroke]="path.stroke"
|
|
64
|
+
[attr.stroke-width]="path.strokeWidth"
|
|
55
65
|
/>
|
|
56
66
|
</svg>
|
|
57
67
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
@@ -78,6 +88,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
78
88
|
[attr.fill]="path.fill"
|
|
79
89
|
[attr.opacity]="path.opacity"
|
|
80
90
|
[attr.fill-rule]="path.fillRule"
|
|
91
|
+
[attr.stroke]="path.stroke"
|
|
92
|
+
[attr.stroke-width]="path.strokeWidth"
|
|
81
93
|
/>
|
|
82
94
|
</svg>
|
|
83
95
|
`,
|
|
@@ -87,6 +99,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
87
99
|
type: Input
|
|
88
100
|
}], strokeWidth: [{
|
|
89
101
|
type: Input
|
|
102
|
+
}], absoluteStrokeWidth: [{
|
|
103
|
+
type: Input
|
|
90
104
|
}], icon: [{
|
|
91
105
|
type: Input
|
|
92
106
|
}], altIcon: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hugeicons-angular.mjs","sources":["../../src/components/hugeicons-icon.component.ts","../../src/hugeicons-angular.ts"],"sourcesContent":["import { Component, Input, ChangeDetectionStrategy, OnInit, OnChanges, SimpleChanges } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { IconSvgObject } from '../lib/types';\n\n@Component({\n selector: 'hugeicons-icon',\n standalone: true,\n imports: [CommonModule],\n template: `\n <svg\n [attr.width]=\"size\"\n [attr.height]=\"size\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n [attr.color]=\"color\"\n [class]=\"class\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n *ngFor=\"let path of paths; trackBy: trackByFn\"\n [attr.d]=\"path.d\"\n [attr.fill]=\"path.fill\"\n [attr.opacity]=\"path.opacity\"\n [attr.fill-rule]=\"path.fillRule\"\n />\n </svg>\n `,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\n\nexport class HugeiconsIconComponent implements OnInit, OnChanges {\n @Input() size: string | number = 24;\n @Input() strokeWidth =
|
|
1
|
+
{"version":3,"file":"hugeicons-angular.mjs","sources":["../../src/components/hugeicons-icon.component.ts","../../src/hugeicons-angular.ts"],"sourcesContent":["import { Component, Input, ChangeDetectionStrategy, OnInit, OnChanges, SimpleChanges } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { IconSvgObject } from '../lib/types';\n\n@Component({\n selector: 'hugeicons-icon',\n standalone: true,\n imports: [CommonModule],\n template: `\n <svg\n [attr.width]=\"size\"\n [attr.height]=\"size\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n [attr.color]=\"color\"\n [class]=\"class\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n *ngFor=\"let path of paths; trackBy: trackByFn\"\n [attr.d]=\"path.d\"\n [attr.fill]=\"path.fill\"\n [attr.opacity]=\"path.opacity\"\n [attr.fill-rule]=\"path.fillRule\"\n [attr.stroke]=\"path.stroke\"\n [attr.stroke-width]=\"path.strokeWidth\"\n />\n </svg>\n `,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\n\nexport class HugeiconsIconComponent implements OnInit, OnChanges {\n @Input() size: string | number = 24;\n @Input() strokeWidth?: number;\n @Input() absoluteStrokeWidth = false;\n @Input() icon!: IconSvgObject;\n @Input() altIcon?: IconSvgObject;\n @Input() color = 'currentColor';\n @Input() class = '';\n @Input() showAlt = false;\n\n paths: Array<{\n d: string;\n fill: string;\n opacity?: string;\n fillRule?: string;\n stroke?: string;\n strokeWidth?: number;\n }> = [];\n\n ngOnInit() {\n this.updatePaths();\n }\n\n ngOnChanges(changes: SimpleChanges) {\n this.updatePaths();\n }\n\n private updatePaths() {\n const currentIcon = this.showAlt && this.altIcon ? this.altIcon : this.icon;\n\n if (!currentIcon || !Array.isArray(currentIcon)) {\n this.paths = [];\n return;\n }\n\n const calculatedStrokeWidth = this.strokeWidth !== undefined\n ? (this.absoluteStrokeWidth ? (Number(this.strokeWidth) * 24) / Number(this.size) : this.strokeWidth)\n : undefined;\n\n const strokeProps = calculatedStrokeWidth !== undefined ? {\n strokeWidth: calculatedStrokeWidth,\n stroke: 'currentColor'\n } : {};\n\n this.paths = currentIcon.map(([_, attrs]) => ({\n d: attrs['d'],\n fill: attrs['fill'] || 'none',\n opacity: attrs['opacity'],\n fillRule: attrs['fillRule'],\n ...strokeProps\n }));\n }\n\n trackByFn(index: number) {\n return index;\n }\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/dist/lib/types.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hugeicons/angular",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "HugeIcons Pro Angular Component Library https://hugeicons.com",
|
|
5
5
|
"homepage": "https://hugeicons.com",
|
|
6
6
|
"type": "module",
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
"tslib": "^2.6.0"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
|
-
"@angular/common": "
|
|
20
|
-
"@angular/core": "
|
|
19
|
+
"@angular/common": ">=17.0.0 <20.0.0",
|
|
20
|
+
"@angular/core": ">=17.0.0 <20.0.0"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"@angular/common": "^17.0.0",
|