@ng-icons/ionicons 26.3.0 → 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.
- package/README.md +42 -58
- 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
|
|
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: [
|
|
@@ -224,18 +216,10 @@ To use it you must register the variable fonts you want to use. The default icon
|
|
|
224
216
|
|
|
225
217
|
```ts
|
|
226
218
|
import { provideNgGlyphs } from '@ng-icons/core';
|
|
227
|
-
import {
|
|
228
|
-
withMaterialSymbolsOutlined,
|
|
229
|
-
withMaterialSymbolsRounded,
|
|
230
|
-
} from '@ng-icons/material-symbols';
|
|
219
|
+
import { withMaterialSymbolsOutlined, withMaterialSymbolsRounded } from '@ng-icons/material-symbols';
|
|
231
220
|
|
|
232
221
|
bootstrapApplication(AppComponent, {
|
|
233
|
-
providers: [
|
|
234
|
-
provideNgGlyphs(
|
|
235
|
-
withMaterialSymbolsOutlined(),
|
|
236
|
-
withMaterialSymbolsRounded(),
|
|
237
|
-
),
|
|
238
|
-
],
|
|
222
|
+
providers: [provideNgGlyphs(withMaterialSymbolsOutlined(), withMaterialSymbolsRounded())],
|
|
239
223
|
});
|
|
240
224
|
```
|
|
241
225
|
|
|
@@ -247,16 +231,16 @@ You can then use the following in your HTML:
|
|
|
247
231
|
|
|
248
232
|
The following inputs are available on `ng-glyph`:
|
|
249
233
|
|
|
250
|
-
| Name | Type
|
|
251
|
-
| ----------- |
|
|
252
|
-
| name | `string`
|
|
253
|
-
| glyphset | `string`
|
|
254
|
-
| size | `number`
|
|
255
|
-
| opticalSize | `number`
|
|
256
|
-
| color | `string`
|
|
257
|
-
| weight | `number`
|
|
258
|
-
| grade | `number`
|
|
259
|
-
| fill | `boolean`
|
|
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`. |
|
|
260
244
|
|
|
261
245
|
The default values for `size`, `weight`, `grade` and `fill` can be configured using the `provideNgGlyphsConfig` function.
|
|
262
246
|
|