@ng-icons/ionicons 26.2.1 → 26.4.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 +89 -38
  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
  ```
@@ -153,10 +152,7 @@ import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core';
153
152
  import { featherAirplay } from '@ng-icons/feather-icons';
154
153
 
155
154
  @NgModule({
156
- imports: [
157
- BrowserModule,
158
- NgIconsModule.withIcons({ featherAirplay, heroUsers }),
159
- ],
155
+ imports: [BrowserModule, NgIconsModule.withIcons({ featherAirplay, heroUsers })],
160
156
  providers: [
161
157
  provideNgIconsConfig({
162
158
  size: '1.5em',
@@ -170,11 +166,7 @@ export class AppModule {}
170
166
  #### Standalone
171
167
 
172
168
  ```ts
173
- import {
174
- NgIconComponent,
175
- provideIcons,
176
- provideNgIconsConfig,
177
- } from '@ng-icons/core';
169
+ import { NgIconComponent, provideIcons, provideNgIconsConfig } from '@ng-icons/core';
178
170
 
179
171
  bootstrapApplication(AppComponent, {
180
172
  providers: [
@@ -211,3 +203,62 @@ bootstrapApplication(AppComponent, {
211
203
  ],
212
204
  });
213
205
  ```
206
+
207
+ ## Experimental Features
208
+
209
+ ### Variable Icon Fonts
210
+
211
+ We have added support for variable icon fonts. This is currently only supported by the [Material Symbols](https://github.com/marella/material-symbols/tree/main/material-symbols#readme) iconset.
212
+
213
+ To enable this feature you must install the icon font and load the `material-symbols` stylesheet. Unlike the static SVG icons, Ng Icons does not bundle the icon font, you must load it yourself.
214
+
215
+ To use it you must register the variable fonts you want to use. The default iconset will be the first one registered.
216
+
217
+ ```ts
218
+ import { provideNgGlyphs } from '@ng-icons/core';
219
+ import { withMaterialSymbolsOutlined, withMaterialSymbolsRounded } from '@ng-icons/material-symbols';
220
+
221
+ bootstrapApplication(AppComponent, {
222
+ providers: [provideNgGlyphs(withMaterialSymbolsOutlined(), withMaterialSymbolsRounded())],
223
+ });
224
+ ```
225
+
226
+ You can then use the following in your HTML:
227
+
228
+ ```html
229
+ <ng-glyph name="settings" />
230
+ ```
231
+
232
+ The following inputs are available on `ng-glyph`:
233
+
234
+ | Name | Type | Description |
235
+ | ----------- | -------------------- | ------------------------------------------------------------------------------------------------------- |
236
+ | name | `string` | Define the name of the icon. |
237
+ | glyphset | `string` | Define the glyphset to use. This defaults to the first registered glyphset. |
238
+ | 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. |
239
+ | opticalSize | `number` | Define the optical size of the icon in `px`. This defaults to `20` |
240
+ | color | `string` | Define the color of the icon. This defaults to the current text color. |
241
+ | weight | `number` | Define the weight of the icon. This defaults to `400`. |
242
+ | grade | `number` | Define the grade of the icon. This defaults to `0`. |
243
+ | fill | `boolean` | Define if the icon should be filled. This defaults to `false`. |
244
+
245
+ The default values for `size`, `weight`, `grade` and `fill` can be configured using the `provideNgGlyphsConfig` function.
246
+
247
+ ```ts
248
+ import { provideNgGlyphsConfig } from '@ng-icons/core';
249
+
250
+ bootstrapApplication(AppComponent, {
251
+ providers: [
252
+ provideNgGlyphsConfig({
253
+ size: 24,
254
+ weight: 400,
255
+ grade: 0,
256
+ fill: false,
257
+ }),
258
+ ],
259
+ });
260
+ ```
261
+
262
+ This feature is experimental and does not follow the same versioning as the rest of the library. Breaking changes may be introduced at any time.
263
+
264
+ We appreciate any feedback you have on this feature.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ng-icons/ionicons",
3
- "version": "26.2.1",
3
+ "version": "26.4.0",
4
4
  "dependencies": {
5
5
  "tslib": "^2.2.0"
6
6
  },