@ng-icons/ionicons 26.3.0 → 26.5.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.
Files changed (2) hide show
  1. package/README.md +73 -58
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -3,7 +3,7 @@
3
3
  # Ng Icons
4
4
 
5
5
  The all-in-one icon library for Angular. This allows you to use icons from multiple icon sets with a single icon component.
6
- Containing over 32,900 icons for you to use in your projects.
6
+ Containing over 35,500 icons for you to use in your projects.
7
7
 
8
8
  Currently, we support the following libraries:
9
9
 
@@ -28,6 +28,7 @@ Currently, we support the following libraries:
28
28
  - [Circum Icons](https://circumicons.com/)
29
29
  - [Remix Icon](https://remixicon.com/)
30
30
  - [Font Awesome](https://fontawesome.com/)
31
+ - [Iconsax](https://iconsax.io/)
31
32
 
32
33
  Got suggestions for additional iconsets? Create an issue and we can consider adding them!
33
34
 
@@ -65,30 +66,31 @@ yarn add @ng-icons/core @ng-icons/heroicons ...
65
66
 
66
67
  The following packages are available:
67
68
 
68
- | Package | License |
69
- | -------------------------------- | ------------ |
70
- | `@ng-icons/core` | MIT |
71
- | `@ng-icons/bootstrap-icons` | MIT |
72
- | `@ng-icons/heroicons` | MIT |
73
- | `@ng-icons/ionicons` | MIT |
74
- | `@ng-icons/material-icons` | Apache 2.0 |
75
- | `@ng-icons/material-file-icons` | MIT |
76
- | `@ng-icons/css.gg` | MIT |
77
- | `@ng-icons/feather-icons` | MIT |
78
- | `@ng-icons/jam-icons` | MIT |
79
- | `@ng-icons/octicons` | MIT |
80
- | `@ng-icons/radix-icons` | MIT |
81
- | `@ng-icons/tabler-icons` | MIT |
82
- | `@ng-icons/akar-icons` | MIT |
83
- | `@ng-icons/iconoir` | MIT |
84
- | `@ng-icons/cryptocurrency-icons` | CC0-1.0 |
85
- | `@ng-icons/simple-icons` | CC0-1.0 |
86
- | `@ng-icons/typicons` | CC-BY-SA-4.0 |
87
- | `@ng-icons/dripicons` | CC-BY-SA-4.0 |
88
- | `@ng-icons/ux-aspects` | Apache 2.0 |
89
- | `@ng-icons/circum-icons` | MPL-2.0 |
90
- | `@ng-icons/remixicon` | Apache 2.0 |
91
- | `@ng-icons/font-awesome` | CC BY 4.0 |
69
+ | Package | License |
70
+ | -------------------------------- | ------------------------------------- |
71
+ | `@ng-icons/core` | MIT |
72
+ | `@ng-icons/bootstrap-icons` | MIT |
73
+ | `@ng-icons/heroicons` | MIT |
74
+ | `@ng-icons/ionicons` | MIT |
75
+ | `@ng-icons/material-icons` | Apache 2.0 |
76
+ | `@ng-icons/material-file-icons` | MIT |
77
+ | `@ng-icons/css.gg` | MIT |
78
+ | `@ng-icons/feather-icons` | MIT |
79
+ | `@ng-icons/jam-icons` | MIT |
80
+ | `@ng-icons/octicons` | MIT |
81
+ | `@ng-icons/radix-icons` | MIT |
82
+ | `@ng-icons/tabler-icons` | MIT |
83
+ | `@ng-icons/akar-icons` | MIT |
84
+ | `@ng-icons/iconoir` | MIT |
85
+ | `@ng-icons/cryptocurrency-icons` | CC0-1.0 |
86
+ | `@ng-icons/simple-icons` | CC0-1.0 |
87
+ | `@ng-icons/typicons` | CC-BY-SA-4.0 |
88
+ | `@ng-icons/dripicons` | CC-BY-SA-4.0 |
89
+ | `@ng-icons/ux-aspects` | Apache 2.0 |
90
+ | `@ng-icons/circum-icons` | MPL-2.0 |
91
+ | `@ng-icons/remixicon` | Apache 2.0 |
92
+ | `@ng-icons/font-awesome` | CC BY 4.0 |
93
+ | `@ng-icons/iconsax` | [Custom](https://iconsax.io/#license) |
92
94
 
93
95
  ## Usage
94
96
 
@@ -100,10 +102,7 @@ import { featherAirplay } from '@ng-icons/feather-icons';
100
102
  import { heroUsers } from '@ng-icons/heroicons/outline';
101
103
 
102
104
  @NgModule({
103
- imports: [
104
- BrowserModule,
105
- NgIconsModule.withIcons({ featherAirplay, heroUsers }),
106
- ],
105
+ imports: [BrowserModule, NgIconsModule.withIcons({ featherAirplay, heroUsers })],
107
106
  })
108
107
  export class AppModule {}
109
108
  ```
@@ -142,6 +141,37 @@ import { heroUsers } from '@ng-icons/heroicons/outline';
142
141
  export class AppComponent {}
143
142
  ```
144
143
 
144
+ #### Directly supplying an SVG
145
+
146
+ Should you need to supply an SVG directly set the `svg` input to the SVG string. This avoids the need to register the icon.
147
+ Only icons from NG Icons iconsets will support the `color`, `size` and `strokeWidth` inputs.
148
+
149
+ ```ts
150
+ import { featherAirplay } from '@ng-icons/feather-icons';
151
+
152
+ // parent.component.ts
153
+ @Component({
154
+ standalone: true,
155
+ template: '<app-child [icon]="icon" />',
156
+ })
157
+ export class ParentComponent {
158
+ icon = featherAirplay;
159
+ }
160
+
161
+ // child.component.ts
162
+ import { NgIconComponent } from '@ng-icons/core';
163
+
164
+ @Component({
165
+ standalone: true,
166
+ selector: 'app-child',
167
+ imports: [NgIconComponent],
168
+ template: '<ng-icon [svg]="icon" />',
169
+ })
170
+ export class ChildComponent {
171
+ @Input({ required: true }) icon!;
172
+ }
173
+ ```
174
+
145
175
  ### Global Configuration
146
176
 
147
177
  You can configure the default size of icons by providing a `NgIconsConfig` object to the `provideNgIconsConfig`:
@@ -153,10 +183,7 @@ import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core';
153
183
  import { featherAirplay } from '@ng-icons/feather-icons';
154
184
 
155
185
  @NgModule({
156
- imports: [
157
- BrowserModule,
158
- NgIconsModule.withIcons({ featherAirplay, heroUsers }),
159
- ],
186
+ imports: [BrowserModule, NgIconsModule.withIcons({ featherAirplay, heroUsers })],
160
187
  providers: [
161
188
  provideNgIconsConfig({
162
189
  size: '1.5em',
@@ -170,11 +197,7 @@ export class AppModule {}
170
197
  #### Standalone
171
198
 
172
199
  ```ts
173
- import {
174
- NgIconComponent,
175
- provideIcons,
176
- provideNgIconsConfig,
177
- } from '@ng-icons/core';
200
+ import { NgIconComponent, provideIcons, provideNgIconsConfig } from '@ng-icons/core';
178
201
 
179
202
  bootstrapApplication(AppComponent, {
180
203
  providers: [
@@ -224,18 +247,10 @@ To use it you must register the variable fonts you want to use. The default icon
224
247
 
225
248
  ```ts
226
249
  import { provideNgGlyphs } from '@ng-icons/core';
227
- import {
228
- withMaterialSymbolsOutlined,
229
- withMaterialSymbolsRounded,
230
- } from '@ng-icons/material-symbols';
250
+ import { withMaterialSymbolsOutlined, withMaterialSymbolsRounded } from '@ng-icons/material-symbols';
231
251
 
232
252
  bootstrapApplication(AppComponent, {
233
- providers: [
234
- provideNgGlyphs(
235
- withMaterialSymbolsOutlined(),
236
- withMaterialSymbolsRounded(),
237
- ),
238
- ],
253
+ providers: [provideNgGlyphs(withMaterialSymbolsOutlined(), withMaterialSymbolsRounded())],
239
254
  });
240
255
  ```
241
256
 
@@ -247,16 +262,16 @@ You can then use the following in your HTML:
247
262
 
248
263
  The following inputs are available on `ng-glyph`:
249
264
 
250
- | Name | Type | Description |
251
- | ----------- | --------- | --------------------------------------------------------------------------- |
252
- | name | `string` | Define the name of the icon. |
253
- | glyphset | `string` | Define the glyphset to use. This defaults to the first registered glyphset. |
254
- | size | `number` | Define the size of the icon. This defaults to the current text size. |
255
- | opticalSize | `number` | Define the optical size of the icon in `px`. This defaults to `20` |
256
- | color | `string` | Define the color of the icon. This defaults to the current text color. |
257
- | weight | `number` | Define the weight of the icon. This defaults to `400`. |
258
- | grade | `number` | Define the grade of the icon. This defaults to `0`. |
259
- | fill | `boolean` | Define if the icon should be filled. This defaults to `false`. |
265
+ | Name | Type | Description |
266
+ | ----------- | -------------------- | ------------------------------------------------------------------------------------------------------- |
267
+ | name | `string` | Define the name of the icon. |
268
+ | glyphset | `string` | Define the glyphset to use. This defaults to the first registered glyphset. |
269
+ | size | `string` \| `number` | Define the size of the icon as a pixel value or as a CSS value. This defaults to the current text size. |
270
+ | opticalSize | `number` | Define the optical size of the icon in `px`. This defaults to `20` |
271
+ | color | `string` | Define the color of the icon. This defaults to the current text color. |
272
+ | weight | `number` | Define the weight of the icon. This defaults to `400`. |
273
+ | grade | `number` | Define the grade of the icon. This defaults to `0`. |
274
+ | fill | `boolean` | Define if the icon should be filled. This defaults to `false`. |
260
275
 
261
276
  The default values for `size`, `weight`, `grade` and `fill` can be configured using the `provideNgGlyphsConfig` function.
262
277
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ng-icons/ionicons",
3
- "version": "26.3.0",
3
+ "version": "26.5.0",
4
4
  "dependencies": {
5
5
  "tslib": "^2.2.0"
6
6
  },