@hugeicons/angular 1.0.6 → 1.0.7
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/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -6,18 +6,18 @@
|
|
|
6
6
|
|
|
7
7
|
## What is Hugeicons?
|
|
8
8
|
|
|
9
|
-
Hugeicons is a large icon set for modern web and mobile apps. The free package includes
|
|
9
|
+
Hugeicons is a large icon set for modern web and mobile apps. The free package includes 5,100+ Stroke Rounded icons. The Pro package provides 51,000+ icons across 10 styles.
|
|
10
10
|
|
|
11
11
|
## How It Works
|
|
12
12
|
|
|
13
13
|
This package (`@hugeicons/angular`) is a **rendering library** - it provides the `HugeiconsIconComponent` that displays icons in your Angular app. The icons themselves come from separate icon packages:
|
|
14
14
|
|
|
15
|
-
- **Free icons**: `@hugeicons/core-free-icons` (
|
|
16
|
-
- **Pro icons**: `@hugeicons-pro/core-*` packages (
|
|
15
|
+
- **Free icons**: `@hugeicons/core-free-icons` (5,100+ icons)
|
|
16
|
+
- **Pro icons**: `@hugeicons-pro/core-*` packages (51,000+ icons, requires license)
|
|
17
17
|
|
|
18
18
|
### Key Highlights
|
|
19
|
-
- **
|
|
20
|
-
- **
|
|
19
|
+
- **5,100+ Free Icons**: Stroke Rounded set for unlimited personal and commercial projects
|
|
20
|
+
- **51,000+ Pro Icons, 10 Styles**: Stroke, Solid, Bulk, Duotone, and Twotone families for sharp, rounded, and standard needs with richer variants
|
|
21
21
|
- **Pixel Perfect Grid**: Built on a 24x24 grid for crisp rendering at any size
|
|
22
22
|
- **Customizable**: Easily adjust colors, sizes, and styles to match your design needs
|
|
23
23
|
- **Tree Shaking Ready**: Named exports keep bundles lean in modern bundlers
|
|
@@ -213,7 +213,7 @@ The library supports all modern browsers.
|
|
|
213
213
|
|
|
214
214
|
## Pro Version
|
|
215
215
|
|
|
216
|
-
> **Want access to
|
|
216
|
+
> **Want access to 51,000+ icons and 10 unique styles?**
|
|
217
217
|
> Check out our [Pro Version](https://hugeicons.com/pricing) and visit our [docs](https://hugeicons.com/docs) for detailed documentation.
|
|
218
218
|
|
|
219
219
|
### Available Pro Styles
|
package/dist/README.md
CHANGED
|
@@ -6,18 +6,18 @@
|
|
|
6
6
|
|
|
7
7
|
## What is Hugeicons?
|
|
8
8
|
|
|
9
|
-
Hugeicons is a large icon set for modern web and mobile apps. The free package includes
|
|
9
|
+
Hugeicons is a large icon set for modern web and mobile apps. The free package includes 5,100+ Stroke Rounded icons. The Pro package provides 51,000+ icons across 10 styles.
|
|
10
10
|
|
|
11
11
|
## How It Works
|
|
12
12
|
|
|
13
13
|
This package (`@hugeicons/angular`) is a **rendering library** - it provides the `HugeiconsIconComponent` that displays icons in your Angular app. The icons themselves come from separate icon packages:
|
|
14
14
|
|
|
15
|
-
- **Free icons**: `@hugeicons/core-free-icons` (
|
|
16
|
-
- **Pro icons**: `@hugeicons-pro/core-*` packages (
|
|
15
|
+
- **Free icons**: `@hugeicons/core-free-icons` (5,100+ icons)
|
|
16
|
+
- **Pro icons**: `@hugeicons-pro/core-*` packages (51,000+ icons, requires license)
|
|
17
17
|
|
|
18
18
|
### Key Highlights
|
|
19
|
-
- **
|
|
20
|
-
- **
|
|
19
|
+
- **5,100+ Free Icons**: Stroke Rounded set for unlimited personal and commercial projects
|
|
20
|
+
- **51,000+ Pro Icons, 10 Styles**: Stroke, Solid, Bulk, Duotone, and Twotone families for sharp, rounded, and standard needs with richer variants
|
|
21
21
|
- **Pixel Perfect Grid**: Built on a 24x24 grid for crisp rendering at any size
|
|
22
22
|
- **Customizable**: Easily adjust colors, sizes, and styles to match your design needs
|
|
23
23
|
- **Tree Shaking Ready**: Named exports keep bundles lean in modern bundlers
|
|
@@ -213,7 +213,7 @@ The library supports all modern browsers.
|
|
|
213
213
|
|
|
214
214
|
## Pro Version
|
|
215
215
|
|
|
216
|
-
> **Want access to
|
|
216
|
+
> **Want access to 51,000+ icons and 10 unique styles?**
|
|
217
217
|
> Check out our [Pro Version](https://hugeicons.com/pricing) and visit our [docs](https://hugeicons.com/docs) for detailed documentation.
|
|
218
218
|
|
|
219
219
|
### Available Pro Styles
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed,
|
|
2
|
+
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
|
|
4
4
|
class HugeiconsIconComponent {
|
|
5
5
|
// Signal inputs - modern Angular 17.1+ approach
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hugeicons-angular.mjs","sources":["../../src/components/hugeicons-icon.component.ts","../../src/hugeicons-angular.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, computed, input } from '@angular/core';\nimport { IconSvgObject } from '../lib/types';\n\ninterface PathData {\n d: string;\n fill: string;\n opacity?: string;\n fillRule?: string;\n stroke?: string;\n strokeWidth?: number;\n}\n\n@Component({\n selector: 'hugeicons-icon',\n standalone: true,\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]=\"iconClass()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n @for (path of paths(); track $index) {\n <path\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 }\n </svg>\n `,\n host: {\n style: 'display: inline-flex; align-items: center; justify-content: center;'\n },\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class HugeiconsIconComponent {\n // Signal inputs - modern Angular 17.1+ approach\n readonly size = input<string | number>(24);\n readonly strokeWidth = input<number | undefined>(undefined);\n readonly absoluteStrokeWidth = input<boolean>(false);\n readonly icon = input.required<IconSvgObject>();\n readonly altIcon = input<IconSvgObject | undefined>(undefined);\n readonly color = input<string>('currentColor');\n readonly iconClass = input<string>('', { alias: 'class' });\n readonly showAlt = input<boolean>(false);\n\n // Computed signal for reactive path updates\n readonly paths = computed<PathData[]>(() => {\n const currentIcon = this.showAlt() && this.altIcon() ? this.altIcon()! : this.icon();\n\n if (!currentIcon || !Array.isArray(currentIcon)) {\n return [];\n }\n\n const strokeWidthValue = this.strokeWidth();\n const calculatedStrokeWidth = strokeWidthValue !== undefined\n ? (this.absoluteStrokeWidth() \n ? (Number(strokeWidthValue) * 24) / Number(this.size()) \n : strokeWidthValue)\n : undefined;\n\n const strokeProps = calculatedStrokeWidth !== undefined \n ? { strokeWidth: calculatedStrokeWidth, stroke: 'currentColor' } \n : {};\n\n return 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 * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MA0Ca,sBAAsB,CAAA;;AAExB,IAAA,IAAI,GAAG,KAAK,CAAkB,EAAE,CAAC;AACjC,IAAA,WAAW,GAAG,KAAK,CAAqB,SAAS,CAAC;AAClD,IAAA,mBAAmB,GAAG,KAAK,CAAU,KAAK,CAAC;AAC3C,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAiB;AACtC,IAAA,OAAO,GAAG,KAAK,CAA4B,SAAS,CAAC;AACrD,IAAA,KAAK,GAAG,KAAK,CAAS,cAAc,CAAC;IACrC,SAAS,GAAG,KAAK,CAAS,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;AACjD,IAAA,OAAO,GAAG,KAAK,CAAU,KAAK,CAAC;;AAG/B,IAAA,KAAK,GAAG,QAAQ,CAAa,MAAK;QACzC,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,EAAG,GAAG,IAAI,CAAC,IAAI,EAAE;QAEpF,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;AAC/C,YAAA,OAAO,EAAE;AACV;AAED,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,EAAE;AAC3C,QAAA,MAAM,qBAAqB,GAAG,gBAAgB,KAAK;AACjD,eAAG,IAAI,CAAC,mBAAmB;AACvB,kBAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE;kBACpD,gBAAgB;cACpB,SAAS;AAEb,QAAA,MAAM,WAAW,GAAG,qBAAqB,KAAK;cAC1C,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,EAAE,cAAc;cAC5D,EAAE;AAEN,QAAA,OAAO,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM;AACtC,YAAA,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC;AACb,YAAA,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,MAAM;AAC7B,YAAA,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;AACzB,YAAA,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC;AAC3B,YAAA,GAAG;AACJ,SAAA,CAAC,CAAC;AACL,
|
|
1
|
+
{"version":3,"file":"hugeicons-angular.mjs","sources":["../../src/components/hugeicons-icon.component.ts","../../src/hugeicons-angular.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, computed, input } from '@angular/core';\nimport { IconSvgObject } from '../lib/types';\n\ninterface PathData {\n d: string;\n fill: string;\n opacity?: string;\n fillRule?: string;\n stroke?: string;\n strokeWidth?: number;\n}\n\n@Component({\n selector: 'hugeicons-icon',\n standalone: true,\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]=\"iconClass()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n @for (path of paths(); track $index) {\n <path\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 }\n </svg>\n `,\n host: {\n style: 'display: inline-flex; align-items: center; justify-content: center;'\n },\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class HugeiconsIconComponent {\n // Signal inputs - modern Angular 17.1+ approach\n readonly size = input<string | number>(24);\n readonly strokeWidth = input<number | undefined>(undefined);\n readonly absoluteStrokeWidth = input<boolean>(false);\n readonly icon = input.required<IconSvgObject>();\n readonly altIcon = input<IconSvgObject | undefined>(undefined);\n readonly color = input<string>('currentColor');\n readonly iconClass = input<string>('', { alias: 'class' });\n readonly showAlt = input<boolean>(false);\n\n // Computed signal for reactive path updates\n readonly paths = computed<PathData[]>(() => {\n const currentIcon = this.showAlt() && this.altIcon() ? this.altIcon()! : this.icon();\n\n if (!currentIcon || !Array.isArray(currentIcon)) {\n return [];\n }\n\n const strokeWidthValue = this.strokeWidth();\n const calculatedStrokeWidth = strokeWidthValue !== undefined\n ? (this.absoluteStrokeWidth() \n ? (Number(strokeWidthValue) * 24) / Number(this.size()) \n : strokeWidthValue)\n : undefined;\n\n const strokeProps = calculatedStrokeWidth !== undefined \n ? { strokeWidth: calculatedStrokeWidth, stroke: 'currentColor' } \n : {};\n\n return 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 * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|