@uxf/icons-generator 11.124.0 → 11.126.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 +73 -72
- package/bin/icons-gen.js +0 -0
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -23,25 +23,25 @@ Requires Node `>= 24`. Peer dependency: `@uxf/core` (`11.114.0`). To use the Fon
|
|
|
23
23
|
|
|
24
24
|
1. Create `icons.config.js` in your project root:
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
26
|
+
```js
|
|
27
|
+
/** @type {import('@uxf/icons-generator/src/types').IconsConfig} */
|
|
28
|
+
module.exports = {
|
|
29
|
+
generatedDirectory: "/public/icons-generated/",
|
|
30
|
+
icons: {
|
|
31
|
+
flame: {
|
|
32
|
+
width: 43,
|
|
33
|
+
height: 48,
|
|
34
|
+
data: `<path fill="#fff" d="M30.84 20.51a1.51 1.51 0 0 0-1.16-.71..." />`,
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
```
|
|
39
39
|
|
|
40
40
|
2. Run the generator:
|
|
41
41
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
```bash
|
|
43
|
+
icons-gen
|
|
44
|
+
```
|
|
45
45
|
|
|
46
46
|
3. Wire the generated `ICONS` + sprite into `@uxf/ui` and render icons (see [Integration](#integration-with-uxfuiicon)).
|
|
47
47
|
|
|
@@ -51,10 +51,10 @@ Requires Node `>= 24`. Peer dependency: `@uxf/core` (`11.114.0`). To use the Fon
|
|
|
51
51
|
icons-gen [options]
|
|
52
52
|
```
|
|
53
53
|
|
|
54
|
-
| Flag | Alias | Default
|
|
55
|
-
| -------------- | ----- |
|
|
56
|
-
| `--configFile` | `-c` | `icons.config.js`
|
|
57
|
-
| `--help` | `-h` | —
|
|
54
|
+
| Flag | Alias | Default | Description |
|
|
55
|
+
| -------------- | ----- | ----------------- | --------------------------------------------- |
|
|
56
|
+
| `--configFile` | `-c` | `icons.config.js` | Path to the config file, resolved from `cwd`. |
|
|
57
|
+
| `--help` | `-h` | — | Print help and exit. |
|
|
58
58
|
|
|
59
59
|
```bash
|
|
60
60
|
icons-gen --configFile=custom.icons.config.js
|
|
@@ -64,16 +64,16 @@ icons-gen --configFile=custom.icons.config.js
|
|
|
64
64
|
|
|
65
65
|
The config file exports an `IconsConfig` object via `module.exports`.
|
|
66
66
|
|
|
67
|
-
| Key | Type
|
|
68
|
-
| ------------------------- |
|
|
69
|
-
| `icons` | `Partial<Record<string, SimpleIcon \| SizedIcon \| IconFromProviderFunction>>` | —
|
|
70
|
-
| `generatedDirectory` | `string`
|
|
71
|
-
| `configDirectory` | `string`
|
|
72
|
-
| `spriteFileName` | `string`
|
|
73
|
-
| `typeName` | `string`
|
|
74
|
-
| `typescript` | `boolean`
|
|
75
|
-
| `moduleDefinition` | `ModuleDefinition \| false`
|
|
76
|
-
| `customDefinitionContent` | `string`
|
|
67
|
+
| Key | Type | Default | Required | Description |
|
|
68
|
+
| ------------------------- | ------------------------------------------------------------------------------ | ----------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------ |
|
|
69
|
+
| `icons` | `Partial<Record<string, SimpleIcon \| SizedIcon \| IconFromProviderFunction>>` | — | Yes | Icons to generate, keyed by icon name (see [Icon types](#icon-types)). |
|
|
70
|
+
| `generatedDirectory` | `string` | `"/public/icons-generated/"` | No | Output dir (relative to `cwd`) for the sprite and standalone SVG files. Must start/end with `/`. |
|
|
71
|
+
| `configDirectory` | `string` | `"/src/config/"` | No | Output dir (relative to `cwd`) for the generated `icons.ts` and provider fallbacks. Must start/end with `/`. |
|
|
72
|
+
| `spriteFileName` | `string` | `"_icon-sprite.svg"` | No | Sprite file name written into `generatedDirectory`. |
|
|
73
|
+
| `typeName` | `string` | `"IconsSet"` | No | Name of the `keyof typeof ICONS` type exported by the generated file. |
|
|
74
|
+
| `typescript` | `boolean` | `true` | No | Emit `icons.ts` vs `icons.js`. See [Gotchas](#gotchas). |
|
|
75
|
+
| `moduleDefinition` | `ModuleDefinition \| false` | augments `@uxf/ui/icon/theme` (see below) | No | Controls the `declare module` type augmentation; `false` disables it. |
|
|
76
|
+
| `customDefinitionContent` | `string` | — | No | Extra content appended verbatim to the end of the generated definition file. |
|
|
77
77
|
|
|
78
78
|
### Icon types
|
|
79
79
|
|
|
@@ -135,7 +135,7 @@ Defaults to `{ moduleName: "@uxf/ui/icon/theme", typeName: "IconsSet", format: "
|
|
|
135
135
|
```ts
|
|
136
136
|
declare module "@uxf/ui/icon/theme" {
|
|
137
137
|
interface IconsSet {
|
|
138
|
-
|
|
138
|
+
flame: true;
|
|
139
139
|
// ...one line per icon
|
|
140
140
|
}
|
|
141
141
|
}
|
|
@@ -147,25 +147,25 @@ This augmentation is what makes `@uxf/ui/icon`'s `IconName` (`keyof IconsSet`) a
|
|
|
147
147
|
|
|
148
148
|
The `faPro` adapter reads icon data from the per-style Font Awesome packages. Install only the styles you actually use.
|
|
149
149
|
|
|
150
|
-
| Namespace
|
|
151
|
-
|
|
|
152
|
-
| `brands.*`
|
|
153
|
-
| `regular.*`
|
|
154
|
-
| `solid.*`
|
|
155
|
-
| `light.*`
|
|
156
|
-
| `thin.*`
|
|
157
|
-
| `duotone.*`
|
|
158
|
-
| `duotone-regular.*`
|
|
159
|
-
| `duotone-light.*`
|
|
160
|
-
| `duotone-thin.*`
|
|
161
|
-
| `sharp-regular.*`
|
|
162
|
-
| `sharp-solid.*`
|
|
163
|
-
| `sharp-light.*`
|
|
164
|
-
| `sharp-thin.*`
|
|
165
|
-
| `sharp-duotone-regular.*`
|
|
166
|
-
| `sharp-duotone-solid.*`
|
|
167
|
-
| `sharp-duotone-light.*`
|
|
168
|
-
| `sharp-duotone-thin.*`
|
|
150
|
+
| Namespace | Package |
|
|
151
|
+
| ------------------------- | ---------------------------------------------- |
|
|
152
|
+
| `brands.*` | `@fortawesome/free-brands-svg-icons` |
|
|
153
|
+
| `regular.*` | `@fortawesome/pro-regular-svg-icons` |
|
|
154
|
+
| `solid.*` | `@fortawesome/pro-solid-svg-icons` |
|
|
155
|
+
| `light.*` | `@fortawesome/pro-light-svg-icons` |
|
|
156
|
+
| `thin.*` | `@fortawesome/pro-thin-svg-icons` |
|
|
157
|
+
| `duotone.*` | `@fortawesome/pro-duotone-svg-icons` |
|
|
158
|
+
| `duotone-regular.*` | `@fortawesome/duotone-regular-svg-icons` |
|
|
159
|
+
| `duotone-light.*` | `@fortawesome/duotone-light-svg-icons` |
|
|
160
|
+
| `duotone-thin.*` | `@fortawesome/duotone-thin-svg-icons` |
|
|
161
|
+
| `sharp-regular.*` | `@fortawesome/sharp-regular-svg-icons` |
|
|
162
|
+
| `sharp-solid.*` | `@fortawesome/sharp-solid-svg-icons` |
|
|
163
|
+
| `sharp-light.*` | `@fortawesome/sharp-light-svg-icons` |
|
|
164
|
+
| `sharp-thin.*` | `@fortawesome/sharp-thin-svg-icons` |
|
|
165
|
+
| `sharp-duotone-regular.*` | `@fortawesome/sharp-duotone-regular-svg-icons` |
|
|
166
|
+
| `sharp-duotone-solid.*` | `@fortawesome/sharp-duotone-solid-svg-icons` |
|
|
167
|
+
| `sharp-duotone-light.*` | `@fortawesome/sharp-duotone-light-svg-icons` |
|
|
168
|
+
| `sharp-duotone-thin.*` | `@fortawesome/sharp-duotone-thin-svg-icons` |
|
|
169
169
|
|
|
170
170
|
An icon is referenced as `"<namespace>.<kebab-icon-name>"` (e.g. `"regular.calendar-check"`). The legacy `@fortawesome/fontawesome-pro` monolith is no longer supported — the adapter throws if it is installed, so uninstall it.
|
|
171
171
|
|
|
@@ -219,16 +219,17 @@ The definition file exports:
|
|
|
219
219
|
export const ICONS_VERSION = "<md5 of the sprite file>";
|
|
220
220
|
|
|
221
221
|
export const ICONS = {
|
|
222
|
-
|
|
223
|
-
|
|
222
|
+
flame: { w: 43, h: 48 },
|
|
223
|
+
logo: [24, 48],
|
|
224
224
|
// ...
|
|
225
225
|
} as const;
|
|
226
226
|
|
|
227
227
|
export type IconsSet = keyof typeof ICONS; // name comes from `typeName`
|
|
228
228
|
|
|
229
|
-
declare module "@uxf/ui/icon/theme" {
|
|
229
|
+
declare module "@uxf/ui/icon/theme" {
|
|
230
|
+
// omitted when moduleDefinition: false
|
|
230
231
|
interface IconsSet {
|
|
231
|
-
|
|
232
|
+
flame: true;
|
|
232
233
|
// ...
|
|
233
234
|
}
|
|
234
235
|
}
|
|
@@ -239,32 +240,32 @@ declare module "@uxf/ui/icon/theme" { // omitted when moduleDefinition: fa
|
|
|
239
240
|
1. Run `icons-gen` (wire it into a `gen`/prebuild script).
|
|
240
241
|
2. Pass the generated `ICONS` and sprite path to `@uxf/ui`'s `UiContextProvider`. Because `generatedDirectory` lives under `public/`, the browser URL drops that segment (`/public/icons-generated/…` → `/icons-generated/…`):
|
|
241
242
|
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
243
|
+
```tsx
|
|
244
|
+
import { UiContextProvider, UiContextType } from "@uxf/ui/context";
|
|
245
|
+
import { ICONS, ICONS_VERSION } from "@/config/icons";
|
|
245
246
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
247
|
+
const uiConfig: UiContextType = {
|
|
248
|
+
icon: {
|
|
249
|
+
iconsConfig: ICONS,
|
|
250
|
+
spriteFilePath: `/icons-generated/_icon-sprite.svg?v=${ICONS_VERSION}`,
|
|
251
|
+
},
|
|
252
|
+
// ...other UI context options (colorScheme, localeConfig, rasterImage, translationFn)
|
|
253
|
+
};
|
|
254
|
+
```
|
|
254
255
|
|
|
255
256
|
3. Render icons via `@uxf/ui`'s `<Icon>`. The `name` prop autocompletes every generated icon thanks to the module augmentation:
|
|
256
257
|
|
|
257
|
-
|
|
258
|
-
|
|
258
|
+
```tsx
|
|
259
|
+
import { Icon } from "@uxf/ui/icon";
|
|
259
260
|
|
|
260
|
-
|
|
261
|
-
|
|
261
|
+
<Icon name="flame" size={24} />;
|
|
262
|
+
```
|
|
262
263
|
|
|
263
264
|
4. (Optional) Preload the sprite:
|
|
264
265
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
266
|
+
```tsx
|
|
267
|
+
<link as="image" href={`/icons-generated/_icon-sprite.svg?v=${ICONS_VERSION}`} rel="preload" type="image/svg+xml" />
|
|
268
|
+
```
|
|
268
269
|
|
|
269
270
|
## Gotchas
|
|
270
271
|
|
package/bin/icons-gen.js
CHANGED
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uxf/icons-generator",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.126.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"yargs": "18.1.0"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
|
-
"@uxf/core": "11.
|
|
25
|
+
"@uxf/core": "11.126.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fortawesome/duotone-light-svg-icons": "7.3.1",
|
|
@@ -43,7 +43,8 @@
|
|
|
43
43
|
"@fortawesome/sharp-solid-svg-icons": "7.3.1",
|
|
44
44
|
"@fortawesome/sharp-thin-svg-icons": "7.3.1",
|
|
45
45
|
"@types/node": "24",
|
|
46
|
-
"@uxf/core": "11.
|
|
46
|
+
"@uxf/core": "11.126.0",
|
|
47
|
+
"tsx": "4.23.12"
|
|
47
48
|
},
|
|
48
49
|
"author": "",
|
|
49
50
|
"license": "ISC",
|