@hugeicons/angular 1.0.0
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 +288 -0
- package/dist/README.md +288 -0
- package/dist/components/hugeicons-icon.component.d.ts +24 -0
- package/dist/esm2022/components/hugeicons-icon.component.mjs +100 -0
- package/dist/esm2022/hugeicons-angular.mjs +5 -0
- package/dist/esm2022/lib/types.mjs +2 -0
- package/dist/esm2022/public-api.mjs +3 -0
- package/dist/fesm2022/hugeicons-angular.mjs +107 -0
- package/dist/fesm2022/hugeicons-angular.mjs.map +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/lib/types.d.ts +21 -0
- package/dist/public-api.d.ts +2 -0
- package/package.json +48 -0
package/README.md
ADDED
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
# @hugeicons/angular
|
|
4
|
+
|
|
5
|
+
> HugeIcons Pro Angular Component Library - Beautiful and customizable icons for your Angular applications
|
|
6
|
+
|
|
7
|
+
## What is HugeIcons?
|
|
8
|
+
|
|
9
|
+
HugeIcons is a comprehensive icon library designed for modern web and mobile applications. The free package includes 4,000+ carefully crafted icons in the Stroke Rounded style, while the pro version offers over 36,000 icons across 9 unique styles.
|
|
10
|
+
|
|
11
|
+
### Key Highlights
|
|
12
|
+
- **4,000+ Free Icons**: Extensive collection of Stroke Rounded icons covering essential UI elements, actions, and concepts
|
|
13
|
+
- **Pixel Perfect**: Every icon is crafted on a 24x24 pixel grid ensuring crisp, clear display at any size
|
|
14
|
+
- **Customizable**: Easily adjust colors, sizes, and styles to match your design needs
|
|
15
|
+
- **Regular Updates**: New icons added regularly to keep up with evolving design trends
|
|
16
|
+
|
|
17
|
+
> 📚 **Looking for Pro Icons?** Check out our comprehensive documentation at [docs.hugeicons.com](https://docs.hugeicons.com) for detailed information about pro icons, styles, and advanced usage.
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
## Table of Contents
|
|
22
|
+
- [What is HugeIcons?](#what-is-hugeicons)
|
|
23
|
+
- [Features](#features)
|
|
24
|
+
- [Installation](#installation)
|
|
25
|
+
- [Usage](#usage)
|
|
26
|
+
- [Inputs](#inputs)
|
|
27
|
+
- [Examples](#examples)
|
|
28
|
+
- [Basic Usage](#basic-usage)
|
|
29
|
+
- [Custom Size and Color](#custom-size-and-color)
|
|
30
|
+
- [Interactive Examples](#interactive-examples)
|
|
31
|
+
- [Performance](#performance)
|
|
32
|
+
- [Troubleshooting](#troubleshooting)
|
|
33
|
+
- [Browser Support](#browser-support)
|
|
34
|
+
- [Related Packages](#related-packages)
|
|
35
|
+
- [Pro Version](#pro-version)
|
|
36
|
+
- [License](#license)
|
|
37
|
+
- [Related](#related)
|
|
38
|
+
|
|
39
|
+
## Features
|
|
40
|
+
|
|
41
|
+
- 🎨 Customizable colors and sizes
|
|
42
|
+
- 💪 TypeScript support with full type definitions
|
|
43
|
+
- 🎯 Tree-shakeable for optimal bundle size
|
|
44
|
+
- 📦 Multiple bundle formats (ESM, CJS, UMD)
|
|
45
|
+
- ⚡ Lightweight and optimized
|
|
46
|
+
- 🔄 Alternate icon support for dynamic interactions
|
|
47
|
+
|
|
48
|
+
## Installation
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
# Using npm
|
|
52
|
+
npm install @hugeicons/angular @hugeicons/core-free-icons
|
|
53
|
+
|
|
54
|
+
# Using yarn
|
|
55
|
+
yarn add @hugeicons/angular @hugeicons/core-free-icons
|
|
56
|
+
|
|
57
|
+
# Using pnpm
|
|
58
|
+
pnpm add @hugeicons/angular @hugeicons/core-free-icons
|
|
59
|
+
|
|
60
|
+
# Using bun
|
|
61
|
+
bun add @hugeicons/angular @hugeicons/core-free-icons
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## Usage
|
|
65
|
+
|
|
66
|
+
First, import the HugeiconsModule in your app.module.ts:
|
|
67
|
+
|
|
68
|
+
```typescript
|
|
69
|
+
import { NgModule } from '@angular/core';
|
|
70
|
+
import { HugeiconsModule } from '@hugeicons/angular';
|
|
71
|
+
|
|
72
|
+
@NgModule({
|
|
73
|
+
imports: [
|
|
74
|
+
HugeiconsModule
|
|
75
|
+
],
|
|
76
|
+
// ...
|
|
77
|
+
})
|
|
78
|
+
export class AppModule { }
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
Then use it in your component:
|
|
82
|
+
|
|
83
|
+
```typescript
|
|
84
|
+
// your.component.ts
|
|
85
|
+
import { Component } from '@angular/core';
|
|
86
|
+
import { SearchIcon } from '@hugeicons/core-free-icons';
|
|
87
|
+
|
|
88
|
+
@Component({
|
|
89
|
+
selector: 'app-your-component',
|
|
90
|
+
template: `
|
|
91
|
+
<hugeicons-icon
|
|
92
|
+
[icon]="icon"
|
|
93
|
+
[size]="24"
|
|
94
|
+
color="currentColor"
|
|
95
|
+
[strokeWidth]="1.5"
|
|
96
|
+
></hugeicons-icon>
|
|
97
|
+
`
|
|
98
|
+
})
|
|
99
|
+
export class YourComponent {
|
|
100
|
+
icon = SearchIcon;
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Inputs
|
|
105
|
+
|
|
106
|
+
| Input | Type | Default | Description |
|
|
107
|
+
|-------|------|---------|-------------|
|
|
108
|
+
| `icon` | `[string, Record<string, any>][]` | Required | The main icon to display (array of SVG elements and their attributes) |
|
|
109
|
+
| `size` | `number \| string` | `24` | Icon size in pixels. Must be a positive number. String values will be parsed to numbers |
|
|
110
|
+
| `strokeWidth` | `number \| undefined` | `undefined` | Width of the icon strokes (works with stroke-style icons) |
|
|
111
|
+
| `altIcon` | `[string, Record<string, any>][]` | `undefined` | Alternative icon that can be used for states, interactions, or animations |
|
|
112
|
+
| `showAlt` | `boolean` | `false` | When true, displays the altIcon instead of the main icon |
|
|
113
|
+
| `color` | `string` | `currentColor` | Icon color (CSS color value) |
|
|
114
|
+
|
|
115
|
+
Note:
|
|
116
|
+
- The component accepts all standard SVG attributes which will be passed to the root SVG element.
|
|
117
|
+
- The `size` input accepts both numbers and strings, but strings will be parsed to numbers and must result in a positive number.
|
|
118
|
+
- Icon arrays are tuples of `[elementName: string, attributes: Record<string, any>][]` representing SVG elements.
|
|
119
|
+
|
|
120
|
+
## Examples
|
|
121
|
+
|
|
122
|
+
### Basic Usage
|
|
123
|
+
```typescript
|
|
124
|
+
// basic.component.ts
|
|
125
|
+
import { Component } from '@angular/core';
|
|
126
|
+
import { SearchIcon } from '@hugeicons/core-free-icons';
|
|
127
|
+
|
|
128
|
+
@Component({
|
|
129
|
+
selector: 'app-basic',
|
|
130
|
+
template: `
|
|
131
|
+
<hugeicons-icon [icon]="icon"></hugeicons-icon>
|
|
132
|
+
`
|
|
133
|
+
})
|
|
134
|
+
export class BasicComponent {
|
|
135
|
+
icon = SearchIcon;
|
|
136
|
+
}
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
### Custom Size and Color
|
|
140
|
+
```typescript
|
|
141
|
+
// custom.component.ts
|
|
142
|
+
import { Component } from '@angular/core';
|
|
143
|
+
import { NotificationIcon } from '@hugeicons/core-free-icons';
|
|
144
|
+
|
|
145
|
+
@Component({
|
|
146
|
+
selector: 'app-custom',
|
|
147
|
+
template: `
|
|
148
|
+
<hugeicons-icon
|
|
149
|
+
[icon]="icon"
|
|
150
|
+
[size]="32"
|
|
151
|
+
color="#FF5733"
|
|
152
|
+
></hugeicons-icon>
|
|
153
|
+
`
|
|
154
|
+
})
|
|
155
|
+
export class CustomComponent {
|
|
156
|
+
icon = NotificationIcon;
|
|
157
|
+
}
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
### Interactive Examples
|
|
161
|
+
|
|
162
|
+
#### Search Bar with Clear Button
|
|
163
|
+
```typescript
|
|
164
|
+
// search.component.ts
|
|
165
|
+
import { Component } from '@angular/core';
|
|
166
|
+
import { SearchIcon, CloseCircleIcon } from '@hugeicons/core-free-icons';
|
|
167
|
+
|
|
168
|
+
@Component({
|
|
169
|
+
selector: 'app-search',
|
|
170
|
+
template: `
|
|
171
|
+
<div>
|
|
172
|
+
<input
|
|
173
|
+
[(ngModel)]="searchValue"
|
|
174
|
+
type="text"
|
|
175
|
+
placeholder="Search..."
|
|
176
|
+
/>
|
|
177
|
+
<hugeicons-icon
|
|
178
|
+
[icon]="SearchIcon"
|
|
179
|
+
[altIcon]="CloseCircleIcon"
|
|
180
|
+
[showAlt]="searchValue.length > 0"
|
|
181
|
+
(click)="clearSearch()"
|
|
182
|
+
></hugeicons-icon>
|
|
183
|
+
</div>
|
|
184
|
+
`
|
|
185
|
+
})
|
|
186
|
+
export class SearchComponent {
|
|
187
|
+
searchValue = '';
|
|
188
|
+
SearchIcon = SearchIcon;
|
|
189
|
+
CloseCircleIcon = CloseCircleIcon;
|
|
190
|
+
|
|
191
|
+
clearSearch(): void {
|
|
192
|
+
if (this.searchValue.length > 0) {
|
|
193
|
+
this.searchValue = '';
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
#### Theme Toggle
|
|
200
|
+
```typescript
|
|
201
|
+
// theme-toggle.component.ts
|
|
202
|
+
import { Component } from '@angular/core';
|
|
203
|
+
import { SunIcon, MoonIcon } from '@hugeicons/core-free-icons';
|
|
204
|
+
|
|
205
|
+
@Component({
|
|
206
|
+
selector: 'app-theme-toggle',
|
|
207
|
+
template: `
|
|
208
|
+
<button (click)="toggleTheme()">
|
|
209
|
+
<hugeicons-icon
|
|
210
|
+
[icon]="SunIcon"
|
|
211
|
+
[altIcon]="MoonIcon"
|
|
212
|
+
[showAlt]="isDark"
|
|
213
|
+
></hugeicons-icon>
|
|
214
|
+
</button>
|
|
215
|
+
`
|
|
216
|
+
})
|
|
217
|
+
export class ThemeToggleComponent {
|
|
218
|
+
isDark = false;
|
|
219
|
+
SunIcon = SunIcon;
|
|
220
|
+
MoonIcon = MoonIcon;
|
|
221
|
+
|
|
222
|
+
toggleTheme(): void {
|
|
223
|
+
this.isDark = !this.isDark;
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
## Performance
|
|
229
|
+
|
|
230
|
+
- **Tree-shaking**: The package is fully tree-shakeable, ensuring only the icons you use are included in your final bundle
|
|
231
|
+
- **Optimized SVGs**: All icons are optimized for size and performance
|
|
232
|
+
- **Code Splitting**: Icons can be easily code-split when using dynamic imports
|
|
233
|
+
|
|
234
|
+
## Troubleshooting
|
|
235
|
+
|
|
236
|
+
### Common Issues
|
|
237
|
+
|
|
238
|
+
1. **Icons not showing up?**
|
|
239
|
+
- Make sure you've installed both `@hugeicons/angular` and `@hugeicons/core-free-icons`
|
|
240
|
+
- Check that the HugeiconsModule is properly imported in your module
|
|
241
|
+
- Verify that icon names are correctly imported
|
|
242
|
+
|
|
243
|
+
2. **TypeScript errors?**
|
|
244
|
+
- Ensure your `tsconfig.json` includes the necessary type definitions
|
|
245
|
+
- Check that you're using the latest version of the package
|
|
246
|
+
|
|
247
|
+
3. **Bundle size concerns?**
|
|
248
|
+
- Use named imports instead of importing the entire icon set
|
|
249
|
+
- Implement code splitting for different sections of your app
|
|
250
|
+
|
|
251
|
+
## Browser Support
|
|
252
|
+
|
|
253
|
+
The library supports all modern browsers.
|
|
254
|
+
|
|
255
|
+
## Related Packages
|
|
256
|
+
|
|
257
|
+
- [@hugeicons/react](https://www.npmjs.com/package/@hugeicons/react) - React component
|
|
258
|
+
- [@hugeicons/vue](https://www.npmjs.com/package/@hugeicons/vue) - Vue component
|
|
259
|
+
- [@hugeicons/svelte](https://www.npmjs.com/package/@hugeicons/svelte) - Svelte component
|
|
260
|
+
- [@hugeicons/react-native](https://www.npmjs.com/package/@hugeicons/react-native) - React Native component
|
|
261
|
+
|
|
262
|
+
## Pro Version
|
|
263
|
+
|
|
264
|
+
> 🌟 **Want access to 36,000+ icons and 9 unique styles?**
|
|
265
|
+
> Check out our [Pro Version](https://hugeicons.com/pricing) and visit [docs.hugeicons.com](https://docs.hugeicons.com) for comprehensive documentation.
|
|
266
|
+
|
|
267
|
+
### Available Pro Styles
|
|
268
|
+
- **Stroke Styles**
|
|
269
|
+
- Stroke Rounded (`@hugeicons-pro/core-stroke-rounded`)
|
|
270
|
+
- Stroke Sharp (`@hugeicons-pro/core-stroke-sharp`)
|
|
271
|
+
- Stroke Standard (`@hugeicons-pro/core-stroke-standard`)
|
|
272
|
+
- **Solid Styles**
|
|
273
|
+
- Solid Rounded (`@hugeicons-pro/core-solid-rounded`)
|
|
274
|
+
- Solid Sharp (`@hugeicons-pro/core-solid-sharp`)
|
|
275
|
+
- Solid Standard (`@hugeicons-pro/core-solid-standard`)
|
|
276
|
+
- **Special Styles**
|
|
277
|
+
- Bulk Rounded (`@hugeicons-pro/core-bulk-rounded`)
|
|
278
|
+
- Duotone Rounded (`@hugeicons-pro/core-duotone-rounded`)
|
|
279
|
+
- Twotone Rounded (`@hugeicons-pro/core-twotone-rounded`)
|
|
280
|
+
|
|
281
|
+
## License
|
|
282
|
+
|
|
283
|
+
This project is licensed under the [MIT License](LICENSE.md).
|
|
284
|
+
|
|
285
|
+
## Related
|
|
286
|
+
|
|
287
|
+
- [@hugeicons/core-free-icons](https://www.npmjs.com/package/@hugeicons/core-free-icons) - Free icon package
|
|
288
|
+
- [HugeIcons Website](https://hugeicons.com) - Browse all available icons
|
package/dist/README.md
ADDED
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
# @hugeicons/angular
|
|
4
|
+
|
|
5
|
+
> HugeIcons Pro Angular Component Library - Beautiful and customizable icons for your Angular applications
|
|
6
|
+
|
|
7
|
+
## What is HugeIcons?
|
|
8
|
+
|
|
9
|
+
HugeIcons is a comprehensive icon library designed for modern web and mobile applications. The free package includes 4,000+ carefully crafted icons in the Stroke Rounded style, while the pro version offers over 36,000 icons across 9 unique styles.
|
|
10
|
+
|
|
11
|
+
### Key Highlights
|
|
12
|
+
- **4,000+ Free Icons**: Extensive collection of Stroke Rounded icons covering essential UI elements, actions, and concepts
|
|
13
|
+
- **Pixel Perfect**: Every icon is crafted on a 24x24 pixel grid ensuring crisp, clear display at any size
|
|
14
|
+
- **Customizable**: Easily adjust colors, sizes, and styles to match your design needs
|
|
15
|
+
- **Regular Updates**: New icons added regularly to keep up with evolving design trends
|
|
16
|
+
|
|
17
|
+
> 📚 **Looking for Pro Icons?** Check out our comprehensive documentation at [docs.hugeicons.com](https://docs.hugeicons.com) for detailed information about pro icons, styles, and advanced usage.
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
## Table of Contents
|
|
22
|
+
- [What is HugeIcons?](#what-is-hugeicons)
|
|
23
|
+
- [Features](#features)
|
|
24
|
+
- [Installation](#installation)
|
|
25
|
+
- [Usage](#usage)
|
|
26
|
+
- [Inputs](#inputs)
|
|
27
|
+
- [Examples](#examples)
|
|
28
|
+
- [Basic Usage](#basic-usage)
|
|
29
|
+
- [Custom Size and Color](#custom-size-and-color)
|
|
30
|
+
- [Interactive Examples](#interactive-examples)
|
|
31
|
+
- [Performance](#performance)
|
|
32
|
+
- [Troubleshooting](#troubleshooting)
|
|
33
|
+
- [Browser Support](#browser-support)
|
|
34
|
+
- [Related Packages](#related-packages)
|
|
35
|
+
- [Pro Version](#pro-version)
|
|
36
|
+
- [License](#license)
|
|
37
|
+
- [Related](#related)
|
|
38
|
+
|
|
39
|
+
## Features
|
|
40
|
+
|
|
41
|
+
- 🎨 Customizable colors and sizes
|
|
42
|
+
- 💪 TypeScript support with full type definitions
|
|
43
|
+
- 🎯 Tree-shakeable for optimal bundle size
|
|
44
|
+
- 📦 Multiple bundle formats (ESM, CJS, UMD)
|
|
45
|
+
- ⚡ Lightweight and optimized
|
|
46
|
+
- 🔄 Alternate icon support for dynamic interactions
|
|
47
|
+
|
|
48
|
+
## Installation
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
# Using npm
|
|
52
|
+
npm install @hugeicons/angular @hugeicons/core-free-icons
|
|
53
|
+
|
|
54
|
+
# Using yarn
|
|
55
|
+
yarn add @hugeicons/angular @hugeicons/core-free-icons
|
|
56
|
+
|
|
57
|
+
# Using pnpm
|
|
58
|
+
pnpm add @hugeicons/angular @hugeicons/core-free-icons
|
|
59
|
+
|
|
60
|
+
# Using bun
|
|
61
|
+
bun add @hugeicons/angular @hugeicons/core-free-icons
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## Usage
|
|
65
|
+
|
|
66
|
+
First, import the HugeiconsModule in your app.module.ts:
|
|
67
|
+
|
|
68
|
+
```typescript
|
|
69
|
+
import { NgModule } from '@angular/core';
|
|
70
|
+
import { HugeiconsModule } from '@hugeicons/angular';
|
|
71
|
+
|
|
72
|
+
@NgModule({
|
|
73
|
+
imports: [
|
|
74
|
+
HugeiconsModule
|
|
75
|
+
],
|
|
76
|
+
// ...
|
|
77
|
+
})
|
|
78
|
+
export class AppModule { }
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
Then use it in your component:
|
|
82
|
+
|
|
83
|
+
```typescript
|
|
84
|
+
// your.component.ts
|
|
85
|
+
import { Component } from '@angular/core';
|
|
86
|
+
import { SearchIcon } from '@hugeicons/core-free-icons';
|
|
87
|
+
|
|
88
|
+
@Component({
|
|
89
|
+
selector: 'app-your-component',
|
|
90
|
+
template: `
|
|
91
|
+
<hugeicons-icon
|
|
92
|
+
[icon]="icon"
|
|
93
|
+
[size]="24"
|
|
94
|
+
color="currentColor"
|
|
95
|
+
[strokeWidth]="1.5"
|
|
96
|
+
></hugeicons-icon>
|
|
97
|
+
`
|
|
98
|
+
})
|
|
99
|
+
export class YourComponent {
|
|
100
|
+
icon = SearchIcon;
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Inputs
|
|
105
|
+
|
|
106
|
+
| Input | Type | Default | Description |
|
|
107
|
+
|-------|------|---------|-------------|
|
|
108
|
+
| `icon` | `[string, Record<string, any>][]` | Required | The main icon to display (array of SVG elements and their attributes) |
|
|
109
|
+
| `size` | `number \| string` | `24` | Icon size in pixels. Must be a positive number. String values will be parsed to numbers |
|
|
110
|
+
| `strokeWidth` | `number \| undefined` | `undefined` | Width of the icon strokes (works with stroke-style icons) |
|
|
111
|
+
| `altIcon` | `[string, Record<string, any>][]` | `undefined` | Alternative icon that can be used for states, interactions, or animations |
|
|
112
|
+
| `showAlt` | `boolean` | `false` | When true, displays the altIcon instead of the main icon |
|
|
113
|
+
| `color` | `string` | `currentColor` | Icon color (CSS color value) |
|
|
114
|
+
|
|
115
|
+
Note:
|
|
116
|
+
- The component accepts all standard SVG attributes which will be passed to the root SVG element.
|
|
117
|
+
- The `size` input accepts both numbers and strings, but strings will be parsed to numbers and must result in a positive number.
|
|
118
|
+
- Icon arrays are tuples of `[elementName: string, attributes: Record<string, any>][]` representing SVG elements.
|
|
119
|
+
|
|
120
|
+
## Examples
|
|
121
|
+
|
|
122
|
+
### Basic Usage
|
|
123
|
+
```typescript
|
|
124
|
+
// basic.component.ts
|
|
125
|
+
import { Component } from '@angular/core';
|
|
126
|
+
import { SearchIcon } from '@hugeicons/core-free-icons';
|
|
127
|
+
|
|
128
|
+
@Component({
|
|
129
|
+
selector: 'app-basic',
|
|
130
|
+
template: `
|
|
131
|
+
<hugeicons-icon [icon]="icon"></hugeicons-icon>
|
|
132
|
+
`
|
|
133
|
+
})
|
|
134
|
+
export class BasicComponent {
|
|
135
|
+
icon = SearchIcon;
|
|
136
|
+
}
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
### Custom Size and Color
|
|
140
|
+
```typescript
|
|
141
|
+
// custom.component.ts
|
|
142
|
+
import { Component } from '@angular/core';
|
|
143
|
+
import { NotificationIcon } from '@hugeicons/core-free-icons';
|
|
144
|
+
|
|
145
|
+
@Component({
|
|
146
|
+
selector: 'app-custom',
|
|
147
|
+
template: `
|
|
148
|
+
<hugeicons-icon
|
|
149
|
+
[icon]="icon"
|
|
150
|
+
[size]="32"
|
|
151
|
+
color="#FF5733"
|
|
152
|
+
></hugeicons-icon>
|
|
153
|
+
`
|
|
154
|
+
})
|
|
155
|
+
export class CustomComponent {
|
|
156
|
+
icon = NotificationIcon;
|
|
157
|
+
}
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
### Interactive Examples
|
|
161
|
+
|
|
162
|
+
#### Search Bar with Clear Button
|
|
163
|
+
```typescript
|
|
164
|
+
// search.component.ts
|
|
165
|
+
import { Component } from '@angular/core';
|
|
166
|
+
import { SearchIcon, CloseCircleIcon } from '@hugeicons/core-free-icons';
|
|
167
|
+
|
|
168
|
+
@Component({
|
|
169
|
+
selector: 'app-search',
|
|
170
|
+
template: `
|
|
171
|
+
<div>
|
|
172
|
+
<input
|
|
173
|
+
[(ngModel)]="searchValue"
|
|
174
|
+
type="text"
|
|
175
|
+
placeholder="Search..."
|
|
176
|
+
/>
|
|
177
|
+
<hugeicons-icon
|
|
178
|
+
[icon]="SearchIcon"
|
|
179
|
+
[altIcon]="CloseCircleIcon"
|
|
180
|
+
[showAlt]="searchValue.length > 0"
|
|
181
|
+
(click)="clearSearch()"
|
|
182
|
+
></hugeicons-icon>
|
|
183
|
+
</div>
|
|
184
|
+
`
|
|
185
|
+
})
|
|
186
|
+
export class SearchComponent {
|
|
187
|
+
searchValue = '';
|
|
188
|
+
SearchIcon = SearchIcon;
|
|
189
|
+
CloseCircleIcon = CloseCircleIcon;
|
|
190
|
+
|
|
191
|
+
clearSearch(): void {
|
|
192
|
+
if (this.searchValue.length > 0) {
|
|
193
|
+
this.searchValue = '';
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
#### Theme Toggle
|
|
200
|
+
```typescript
|
|
201
|
+
// theme-toggle.component.ts
|
|
202
|
+
import { Component } from '@angular/core';
|
|
203
|
+
import { SunIcon, MoonIcon } from '@hugeicons/core-free-icons';
|
|
204
|
+
|
|
205
|
+
@Component({
|
|
206
|
+
selector: 'app-theme-toggle',
|
|
207
|
+
template: `
|
|
208
|
+
<button (click)="toggleTheme()">
|
|
209
|
+
<hugeicons-icon
|
|
210
|
+
[icon]="SunIcon"
|
|
211
|
+
[altIcon]="MoonIcon"
|
|
212
|
+
[showAlt]="isDark"
|
|
213
|
+
></hugeicons-icon>
|
|
214
|
+
</button>
|
|
215
|
+
`
|
|
216
|
+
})
|
|
217
|
+
export class ThemeToggleComponent {
|
|
218
|
+
isDark = false;
|
|
219
|
+
SunIcon = SunIcon;
|
|
220
|
+
MoonIcon = MoonIcon;
|
|
221
|
+
|
|
222
|
+
toggleTheme(): void {
|
|
223
|
+
this.isDark = !this.isDark;
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
## Performance
|
|
229
|
+
|
|
230
|
+
- **Tree-shaking**: The package is fully tree-shakeable, ensuring only the icons you use are included in your final bundle
|
|
231
|
+
- **Optimized SVGs**: All icons are optimized for size and performance
|
|
232
|
+
- **Code Splitting**: Icons can be easily code-split when using dynamic imports
|
|
233
|
+
|
|
234
|
+
## Troubleshooting
|
|
235
|
+
|
|
236
|
+
### Common Issues
|
|
237
|
+
|
|
238
|
+
1. **Icons not showing up?**
|
|
239
|
+
- Make sure you've installed both `@hugeicons/angular` and `@hugeicons/core-free-icons`
|
|
240
|
+
- Check that the HugeiconsModule is properly imported in your module
|
|
241
|
+
- Verify that icon names are correctly imported
|
|
242
|
+
|
|
243
|
+
2. **TypeScript errors?**
|
|
244
|
+
- Ensure your `tsconfig.json` includes the necessary type definitions
|
|
245
|
+
- Check that you're using the latest version of the package
|
|
246
|
+
|
|
247
|
+
3. **Bundle size concerns?**
|
|
248
|
+
- Use named imports instead of importing the entire icon set
|
|
249
|
+
- Implement code splitting for different sections of your app
|
|
250
|
+
|
|
251
|
+
## Browser Support
|
|
252
|
+
|
|
253
|
+
The library supports all modern browsers.
|
|
254
|
+
|
|
255
|
+
## Related Packages
|
|
256
|
+
|
|
257
|
+
- [@hugeicons/react](https://www.npmjs.com/package/@hugeicons/react) - React component
|
|
258
|
+
- [@hugeicons/vue](https://www.npmjs.com/package/@hugeicons/vue) - Vue component
|
|
259
|
+
- [@hugeicons/svelte](https://www.npmjs.com/package/@hugeicons/svelte) - Svelte component
|
|
260
|
+
- [@hugeicons/react-native](https://www.npmjs.com/package/@hugeicons/react-native) - React Native component
|
|
261
|
+
|
|
262
|
+
## Pro Version
|
|
263
|
+
|
|
264
|
+
> 🌟 **Want access to 36,000+ icons and 9 unique styles?**
|
|
265
|
+
> Check out our [Pro Version](https://hugeicons.com/pricing) and visit [docs.hugeicons.com](https://docs.hugeicons.com) for comprehensive documentation.
|
|
266
|
+
|
|
267
|
+
### Available Pro Styles
|
|
268
|
+
- **Stroke Styles**
|
|
269
|
+
- Stroke Rounded (`@hugeicons-pro/core-stroke-rounded`)
|
|
270
|
+
- Stroke Sharp (`@hugeicons-pro/core-stroke-sharp`)
|
|
271
|
+
- Stroke Standard (`@hugeicons-pro/core-stroke-standard`)
|
|
272
|
+
- **Solid Styles**
|
|
273
|
+
- Solid Rounded (`@hugeicons-pro/core-solid-rounded`)
|
|
274
|
+
- Solid Sharp (`@hugeicons-pro/core-solid-sharp`)
|
|
275
|
+
- Solid Standard (`@hugeicons-pro/core-solid-standard`)
|
|
276
|
+
- **Special Styles**
|
|
277
|
+
- Bulk Rounded (`@hugeicons-pro/core-bulk-rounded`)
|
|
278
|
+
- Duotone Rounded (`@hugeicons-pro/core-duotone-rounded`)
|
|
279
|
+
- Twotone Rounded (`@hugeicons-pro/core-twotone-rounded`)
|
|
280
|
+
|
|
281
|
+
## License
|
|
282
|
+
|
|
283
|
+
This project is licensed under the [MIT License](LICENSE.md).
|
|
284
|
+
|
|
285
|
+
## Related
|
|
286
|
+
|
|
287
|
+
- [@hugeicons/core-free-icons](https://www.npmjs.com/package/@hugeicons/core-free-icons) - Free icon package
|
|
288
|
+
- [HugeIcons Website](https://hugeicons.com) - Browse all available icons
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
|
|
2
|
+
import { IconSvgObject } from '../lib/types';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export declare class HugeiconsIconComponent implements OnInit, OnChanges {
|
|
5
|
+
size: string | number;
|
|
6
|
+
strokeWidth: number;
|
|
7
|
+
icon: IconSvgObject;
|
|
8
|
+
altIcon?: IconSvgObject;
|
|
9
|
+
color: string;
|
|
10
|
+
class: string;
|
|
11
|
+
showAlt: boolean;
|
|
12
|
+
paths: Array<{
|
|
13
|
+
d: string;
|
|
14
|
+
fill: string;
|
|
15
|
+
opacity?: string;
|
|
16
|
+
fillRule?: string;
|
|
17
|
+
}>;
|
|
18
|
+
ngOnInit(): void;
|
|
19
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
20
|
+
private updatePaths;
|
|
21
|
+
trackByFn(index: number): number;
|
|
22
|
+
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>;
|
|
24
|
+
}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
import * as i1 from "@angular/common";
|
|
5
|
+
export class HugeiconsIconComponent {
|
|
6
|
+
size = 24;
|
|
7
|
+
strokeWidth = 1.5;
|
|
8
|
+
icon;
|
|
9
|
+
altIcon;
|
|
10
|
+
color = 'currentColor';
|
|
11
|
+
class = '';
|
|
12
|
+
showAlt = false;
|
|
13
|
+
paths = [];
|
|
14
|
+
ngOnInit() {
|
|
15
|
+
this.updatePaths();
|
|
16
|
+
}
|
|
17
|
+
ngOnChanges(changes) {
|
|
18
|
+
this.updatePaths();
|
|
19
|
+
}
|
|
20
|
+
updatePaths() {
|
|
21
|
+
const currentIcon = this.showAlt && this.altIcon ? this.altIcon : this.icon;
|
|
22
|
+
if (!currentIcon || !Array.isArray(currentIcon)) {
|
|
23
|
+
this.paths = [];
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
this.paths = currentIcon.map(([_, attrs]) => ({
|
|
27
|
+
d: attrs['d'],
|
|
28
|
+
fill: attrs['fill'] || 'none',
|
|
29
|
+
opacity: attrs['opacity'],
|
|
30
|
+
fillRule: attrs['fillRule'],
|
|
31
|
+
strokeWidth: attrs['strokeWidth'] || this.strokeWidth
|
|
32
|
+
}));
|
|
33
|
+
}
|
|
34
|
+
trackByFn(index) {
|
|
35
|
+
return index;
|
|
36
|
+
}
|
|
37
|
+
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: `
|
|
39
|
+
<svg
|
|
40
|
+
[attr.width]="size"
|
|
41
|
+
[attr.height]="size"
|
|
42
|
+
viewBox="0 0 24 24"
|
|
43
|
+
fill="none"
|
|
44
|
+
[attr.color]="color"
|
|
45
|
+
[class]="class"
|
|
46
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
47
|
+
>
|
|
48
|
+
<path
|
|
49
|
+
*ngFor="let path of paths; trackBy: trackByFn"
|
|
50
|
+
[attr.d]="path.d"
|
|
51
|
+
[attr.fill]="path.fill"
|
|
52
|
+
[attr.opacity]="path.opacity"
|
|
53
|
+
[attr.fill-rule]="path.fillRule"
|
|
54
|
+
/>
|
|
55
|
+
</svg>
|
|
56
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
57
|
+
}
|
|
58
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HugeiconsIconComponent, decorators: [{
|
|
59
|
+
type: Component,
|
|
60
|
+
args: [{
|
|
61
|
+
selector: 'hugeicons-icon',
|
|
62
|
+
standalone: true,
|
|
63
|
+
imports: [CommonModule],
|
|
64
|
+
template: `
|
|
65
|
+
<svg
|
|
66
|
+
[attr.width]="size"
|
|
67
|
+
[attr.height]="size"
|
|
68
|
+
viewBox="0 0 24 24"
|
|
69
|
+
fill="none"
|
|
70
|
+
[attr.color]="color"
|
|
71
|
+
[class]="class"
|
|
72
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
73
|
+
>
|
|
74
|
+
<path
|
|
75
|
+
*ngFor="let path of paths; trackBy: trackByFn"
|
|
76
|
+
[attr.d]="path.d"
|
|
77
|
+
[attr.fill]="path.fill"
|
|
78
|
+
[attr.opacity]="path.opacity"
|
|
79
|
+
[attr.fill-rule]="path.fillRule"
|
|
80
|
+
/>
|
|
81
|
+
</svg>
|
|
82
|
+
`,
|
|
83
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
|
84
|
+
}]
|
|
85
|
+
}], propDecorators: { size: [{
|
|
86
|
+
type: Input
|
|
87
|
+
}], strokeWidth: [{
|
|
88
|
+
type: Input
|
|
89
|
+
}], icon: [{
|
|
90
|
+
type: Input
|
|
91
|
+
}], altIcon: [{
|
|
92
|
+
type: Input
|
|
93
|
+
}], color: [{
|
|
94
|
+
type: Input
|
|
95
|
+
}], class: [{
|
|
96
|
+
type: Input
|
|
97
|
+
}], showAlt: [{
|
|
98
|
+
type: Input
|
|
99
|
+
}] } });
|
|
100
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHVnZWljb25zLWljb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvaHVnZWljb25zLWljb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLHVCQUF1QixFQUFvQyxNQUFNLGVBQWUsQ0FBQztBQUM1RyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7OztBQTZCL0MsTUFBTSxPQUFPLHNCQUFzQjtJQUN4QixJQUFJLEdBQW9CLEVBQUUsQ0FBQztJQUMzQixXQUFXLEdBQUcsR0FBRyxDQUFDO0lBQ2xCLElBQUksQ0FBaUI7SUFDckIsT0FBTyxDQUFpQjtJQUN4QixLQUFLLEdBQUcsY0FBYyxDQUFDO0lBQ3ZCLEtBQUssR0FBRyxFQUFFLENBQUM7SUFDWCxPQUFPLEdBQUcsS0FBSyxDQUFDO0lBRXpCLEtBQUssR0FLQSxFQUFFLENBQUM7SUFFUixRQUFRO1FBQ04sSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFTyxXQUFXO1FBQ2pCLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQztRQUU1RSxJQUFJLENBQUMsV0FBVyxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxXQUFXLENBQUMsRUFBRTtZQUMvQyxJQUFJLENBQUMsS0FBSyxHQUFHLEVBQUUsQ0FBQztZQUNoQixPQUFPO1NBQ1I7UUFFRCxJQUFJLENBQUMsS0FBSyxHQUFHLFdBQVcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxLQUFLLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztZQUM1QyxDQUFDLEVBQUUsS0FBSyxDQUFDLEdBQUcsQ0FBQztZQUNiLElBQUksRUFBRSxLQUFLLENBQUMsTUFBTSxDQUFDLElBQUksTUFBTTtZQUM3QixPQUFPLEVBQUUsS0FBSyxDQUFDLFNBQVMsQ0FBQztZQUN6QixRQUFRLEVBQUUsS0FBSyxDQUFDLFVBQVUsQ0FBQztZQUMzQixXQUFXLEVBQUUsS0FBSyxDQUFDLGFBQWEsQ0FBQyxJQUFJLElBQUksQ0FBQyxXQUFXO1NBQ3RELENBQUMsQ0FBQyxDQUFDO0lBQ04sQ0FBQztJQUVELFNBQVMsQ0FBQyxLQUFhO1FBQ3JCLE9BQU8sS0FBSyxDQUFDO0lBQ2YsQ0FBQzt3R0EzQ1Usc0JBQXNCOzRGQUF0QixzQkFBc0IsMk9BdEJ2Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBa0JULDJEQW5CUyxZQUFZOzs0RkF1Qlgsc0JBQXNCO2tCQTFCbEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixVQUFVLEVBQUUsSUFBSTtvQkFDaEIsT0FBTyxFQUFFLENBQUMsWUFBWSxDQUFDO29CQUN2QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWtCVDtvQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtpQkFDaEQ7OEJBR1UsSUFBSTtzQkFBWixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBPbkluaXQsIE9uQ2hhbmdlcywgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEljb25TdmdPYmplY3QgfSBmcm9tICcuLi9saWIvdHlwZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdodWdlaWNvbnMtaWNvbicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxzdmdcbiAgICAgIFthdHRyLndpZHRoXT1cInNpemVcIlxuICAgICAgW2F0dHIuaGVpZ2h0XT1cInNpemVcIlxuICAgICAgdmlld0JveD1cIjAgMCAyNCAyNFwiXG4gICAgICBmaWxsPVwibm9uZVwiXG4gICAgICBbYXR0ci5jb2xvcl09XCJjb2xvclwiXG4gICAgICBbY2xhc3NdPVwiY2xhc3NcIlxuICAgICAgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiXG4gICAgPlxuICAgICAgPHBhdGhcbiAgICAgICAgKm5nRm9yPVwibGV0IHBhdGggb2YgcGF0aHM7IHRyYWNrQnk6IHRyYWNrQnlGblwiXG4gICAgICAgIFthdHRyLmRdPVwicGF0aC5kXCJcbiAgICAgICAgW2F0dHIuZmlsbF09XCJwYXRoLmZpbGxcIlxuICAgICAgICBbYXR0ci5vcGFjaXR5XT1cInBhdGgub3BhY2l0eVwiXG4gICAgICAgIFthdHRyLmZpbGwtcnVsZV09XCJwYXRoLmZpbGxSdWxlXCJcbiAgICAgIC8+XG4gICAgPC9zdmc+XG4gIGAsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuXG5leHBvcnQgY2xhc3MgSHVnZWljb25zSWNvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgc2l6ZTogc3RyaW5nIHwgbnVtYmVyID0gMjQ7XG4gIEBJbnB1dCgpIHN0cm9rZVdpZHRoID0gMS41O1xuICBASW5wdXQoKSBpY29uITogSWNvblN2Z09iamVjdDtcbiAgQElucHV0KCkgYWx0SWNvbj86IEljb25TdmdPYmplY3Q7XG4gIEBJbnB1dCgpIGNvbG9yID0gJ2N1cnJlbnRDb2xvcic7XG4gIEBJbnB1dCgpIGNsYXNzID0gJyc7XG4gIEBJbnB1dCgpIHNob3dBbHQgPSBmYWxzZTtcblxuICBwYXRoczogQXJyYXk8e1xuICAgIGQ6IHN0cmluZztcbiAgICBmaWxsOiBzdHJpbmc7XG4gICAgb3BhY2l0eT86IHN0cmluZztcbiAgICBmaWxsUnVsZT86IHN0cmluZztcbiAgfT4gPSBbXTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnVwZGF0ZVBhdGhzKCk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgdGhpcy51cGRhdGVQYXRocygpO1xuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGVQYXRocygpIHtcbiAgICBjb25zdCBjdXJyZW50SWNvbiA9IHRoaXMuc2hvd0FsdCAmJiB0aGlzLmFsdEljb24gPyB0aGlzLmFsdEljb24gOiB0aGlzLmljb247XG5cbiAgICBpZiAoIWN1cnJlbnRJY29uIHx8ICFBcnJheS5pc0FycmF5KGN1cnJlbnRJY29uKSkge1xuICAgICAgdGhpcy5wYXRocyA9IFtdO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHRoaXMucGF0aHMgPSBjdXJyZW50SWNvbi5tYXAoKFtfLCBhdHRyc10pID0+ICh7XG4gICAgICBkOiBhdHRyc1snZCddLFxuICAgICAgZmlsbDogYXR0cnNbJ2ZpbGwnXSB8fCAnbm9uZScsXG4gICAgICBvcGFjaXR5OiBhdHRyc1snb3BhY2l0eSddLFxuICAgICAgZmlsbFJ1bGU6IGF0dHJzWydmaWxsUnVsZSddLFxuICAgICAgc3Ryb2tlV2lkdGg6IGF0dHJzWydzdHJva2VXaWR0aCddIHx8IHRoaXMuc3Ryb2tlV2lkdGhcbiAgICB9KSk7XG4gIH1cblxuICB0cmFja0J5Rm4oaW5kZXg6IG51bWJlcikge1xuICAgIHJldHVybiBpbmRleDtcbiAgfVxufSJdfQ==
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generated bundle index. Do not edit.
|
|
3
|
+
*/
|
|
4
|
+
export * from './public-api';
|
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHVnZWljb25zLWFuZ3VsYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaHVnZWljb25zLWFuZ3VsYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL3R5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgdHlwZSBJY29uU3ZnT2JqZWN0ID0gcmVhZG9ubHkgKHJlYWRvbmx5IFtzdHJpbmcsIFJlY29yZDxzdHJpbmcsIGFueT5dKVtdO1xuXG5leHBvcnQgdHlwZSBJY29uTmFtZSA9IHN0cmluZztcblxuZXhwb3J0IGludGVyZmFjZSBJY29uTWV0YWRhdGEge1xuICBuYW1lOiBJY29uTmFtZTtcbiAgY2F0ZWdvcnk6IHN0cmluZztcbiAgdGFnczogc3RyaW5nW107XG4gIHBhY2s6IHN0cmluZztcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJY29uRGF0YSB7XG4gIGljb246IEljb25TdmdPYmplY3Q7XG4gIG1ldGFkYXRhOiBJY29uTWV0YWRhdGE7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSHVnZWljb25zUHJvcHMge1xuICBzaXplPzogc3RyaW5nIHwgbnVtYmVyO1xuICBzdHJva2VXaWR0aD86IG51bWJlcjtcbiAgaWNvbjogSWNvblN2Z09iamVjdDtcbiAgYWx0SWNvbj86IEljb25TdmdPYmplY3Q7XG4gIGNvbG9yPzogc3RyaW5nO1xuICBjbGFzcz86IHN0cmluZztcbiAgc2hvd0FsdD86IGJvb2xlYW47XG59ICJdfQ==
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export * from './components/hugeicons-icon.component';
|
|
2
|
+
export * from './lib/types';
|
|
3
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsdUNBQXVDLENBQUM7QUFDdEQsY0FBYyxhQUFhLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2NvbXBvbmVudHMvaHVnZWljb25zLWljb24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3R5cGVzJzsgIl19
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/common';
|
|
4
|
+
import { CommonModule } from '@angular/common';
|
|
5
|
+
|
|
6
|
+
class HugeiconsIconComponent {
|
|
7
|
+
size = 24;
|
|
8
|
+
strokeWidth = 1.5;
|
|
9
|
+
icon;
|
|
10
|
+
altIcon;
|
|
11
|
+
color = 'currentColor';
|
|
12
|
+
class = '';
|
|
13
|
+
showAlt = false;
|
|
14
|
+
paths = [];
|
|
15
|
+
ngOnInit() {
|
|
16
|
+
this.updatePaths();
|
|
17
|
+
}
|
|
18
|
+
ngOnChanges(changes) {
|
|
19
|
+
this.updatePaths();
|
|
20
|
+
}
|
|
21
|
+
updatePaths() {
|
|
22
|
+
const currentIcon = this.showAlt && this.altIcon ? this.altIcon : this.icon;
|
|
23
|
+
if (!currentIcon || !Array.isArray(currentIcon)) {
|
|
24
|
+
this.paths = [];
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
this.paths = currentIcon.map(([_, attrs]) => ({
|
|
28
|
+
d: attrs['d'],
|
|
29
|
+
fill: attrs['fill'] || 'none',
|
|
30
|
+
opacity: attrs['opacity'],
|
|
31
|
+
fillRule: attrs['fillRule'],
|
|
32
|
+
strokeWidth: attrs['strokeWidth'] || this.strokeWidth
|
|
33
|
+
}));
|
|
34
|
+
}
|
|
35
|
+
trackByFn(index) {
|
|
36
|
+
return index;
|
|
37
|
+
}
|
|
38
|
+
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: `
|
|
40
|
+
<svg
|
|
41
|
+
[attr.width]="size"
|
|
42
|
+
[attr.height]="size"
|
|
43
|
+
viewBox="0 0 24 24"
|
|
44
|
+
fill="none"
|
|
45
|
+
[attr.color]="color"
|
|
46
|
+
[class]="class"
|
|
47
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
48
|
+
>
|
|
49
|
+
<path
|
|
50
|
+
*ngFor="let path of paths; trackBy: trackByFn"
|
|
51
|
+
[attr.d]="path.d"
|
|
52
|
+
[attr.fill]="path.fill"
|
|
53
|
+
[attr.opacity]="path.opacity"
|
|
54
|
+
[attr.fill-rule]="path.fillRule"
|
|
55
|
+
/>
|
|
56
|
+
</svg>
|
|
57
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
58
|
+
}
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HugeiconsIconComponent, decorators: [{
|
|
60
|
+
type: Component,
|
|
61
|
+
args: [{
|
|
62
|
+
selector: 'hugeicons-icon',
|
|
63
|
+
standalone: true,
|
|
64
|
+
imports: [CommonModule],
|
|
65
|
+
template: `
|
|
66
|
+
<svg
|
|
67
|
+
[attr.width]="size"
|
|
68
|
+
[attr.height]="size"
|
|
69
|
+
viewBox="0 0 24 24"
|
|
70
|
+
fill="none"
|
|
71
|
+
[attr.color]="color"
|
|
72
|
+
[class]="class"
|
|
73
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
74
|
+
>
|
|
75
|
+
<path
|
|
76
|
+
*ngFor="let path of paths; trackBy: trackByFn"
|
|
77
|
+
[attr.d]="path.d"
|
|
78
|
+
[attr.fill]="path.fill"
|
|
79
|
+
[attr.opacity]="path.opacity"
|
|
80
|
+
[attr.fill-rule]="path.fillRule"
|
|
81
|
+
/>
|
|
82
|
+
</svg>
|
|
83
|
+
`,
|
|
84
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
|
85
|
+
}]
|
|
86
|
+
}], propDecorators: { size: [{
|
|
87
|
+
type: Input
|
|
88
|
+
}], strokeWidth: [{
|
|
89
|
+
type: Input
|
|
90
|
+
}], icon: [{
|
|
91
|
+
type: Input
|
|
92
|
+
}], altIcon: [{
|
|
93
|
+
type: Input
|
|
94
|
+
}], color: [{
|
|
95
|
+
type: Input
|
|
96
|
+
}], class: [{
|
|
97
|
+
type: Input
|
|
98
|
+
}], showAlt: [{
|
|
99
|
+
type: Input
|
|
100
|
+
}] } });
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* Generated bundle index. Do not edit.
|
|
104
|
+
*/
|
|
105
|
+
|
|
106
|
+
export { HugeiconsIconComponent };
|
|
107
|
+
//# sourceMappingURL=hugeicons-angular.mjs.map
|
|
@@ -0,0 +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.5;\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 }> = [];\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 this.paths = currentIcon.map(([_, attrs]) => ({\n d: attrs['d'],\n fill: attrs['fill'] || 'none',\n opacity: attrs['opacity'],\n fillRule: attrs['fillRule'],\n strokeWidth: attrs['strokeWidth'] || this.strokeWidth\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/index.d.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export type IconSvgObject = readonly (readonly [string, Record<string, any>])[];
|
|
2
|
+
export type IconName = string;
|
|
3
|
+
export interface IconMetadata {
|
|
4
|
+
name: IconName;
|
|
5
|
+
category: string;
|
|
6
|
+
tags: string[];
|
|
7
|
+
pack: string;
|
|
8
|
+
}
|
|
9
|
+
export interface IconData {
|
|
10
|
+
icon: IconSvgObject;
|
|
11
|
+
metadata: IconMetadata;
|
|
12
|
+
}
|
|
13
|
+
export interface HugeiconsProps {
|
|
14
|
+
size?: string | number;
|
|
15
|
+
strokeWidth?: number;
|
|
16
|
+
icon: IconSvgObject;
|
|
17
|
+
altIcon?: IconSvgObject;
|
|
18
|
+
color?: string;
|
|
19
|
+
class?: string;
|
|
20
|
+
showAlt?: boolean;
|
|
21
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@hugeicons/angular",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "HugeIcons Pro Angular Component Library https://hugeicons.com",
|
|
5
|
+
"homepage": "https://hugeicons.com",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"main": "./dist/bundles/hugeicons-angular.umd.js",
|
|
8
|
+
"module": "./dist/fesm2022/hugeicons-angular.mjs",
|
|
9
|
+
"typings": "./dist/index.d.ts",
|
|
10
|
+
"sideEffects": false,
|
|
11
|
+
"files": [
|
|
12
|
+
"dist"
|
|
13
|
+
],
|
|
14
|
+
"author": "Hugeicons",
|
|
15
|
+
"dependencies": {
|
|
16
|
+
"tslib": "^2.6.0"
|
|
17
|
+
},
|
|
18
|
+
"peerDependencies": {
|
|
19
|
+
"@angular/common": "^17.0.0",
|
|
20
|
+
"@angular/core": "^17.0.0"
|
|
21
|
+
},
|
|
22
|
+
"devDependencies": {
|
|
23
|
+
"@angular/common": "^17.0.0",
|
|
24
|
+
"@angular/compiler": "^17.0.0",
|
|
25
|
+
"@angular/compiler-cli": "^17.0.0",
|
|
26
|
+
"@angular/core": "^17.0.0",
|
|
27
|
+
"@angular-devkit/build-angular": "^17.0.0",
|
|
28
|
+
"ng-packagr": "^17.0.0",
|
|
29
|
+
"typescript": "~5.2.0"
|
|
30
|
+
},
|
|
31
|
+
"keywords": [
|
|
32
|
+
"icons",
|
|
33
|
+
"angular-icons",
|
|
34
|
+
"ui-components",
|
|
35
|
+
"design-system",
|
|
36
|
+
"vector-icons",
|
|
37
|
+
"angular-component-library",
|
|
38
|
+
"web-icons",
|
|
39
|
+
"scalable-icons",
|
|
40
|
+
"customizable-icons",
|
|
41
|
+
"icon-library"
|
|
42
|
+
],
|
|
43
|
+
"scripts": {
|
|
44
|
+
"build": "pnpm clean && ng-packagr -p ng-package.json",
|
|
45
|
+
"clean": "rm -rf dist",
|
|
46
|
+
"test": "ng test"
|
|
47
|
+
}
|
|
48
|
+
}
|