@uxf/icons-generator 11.114.0 → 11.122.4
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 +223 -115
- package/package.json +18 -2
- package/scripts/generate-fa-pro-types.js +81 -15
- package/src/fa-pro-types.d.ts +1 -1
- package/src/providers/fa-pro.js +92 -30
- package/src/utils/_createSpriteContent.js +8 -3
package/README.md
CHANGED
|
@@ -1,58 +1,86 @@
|
|
|
1
1
|
# @uxf/icons-generator
|
|
2
|
-
A well configurable tool for generating and managing custom SVG icons and sprites in web projects.
|
|
3
2
|
|
|
4
|
-
|
|
3
|
+
CLI that bundles a project's SVG icons into a single sprite and generates the matching TypeScript definitions that power `@uxf/ui`'s `<Icon>` component.
|
|
4
|
+
|
|
5
|
+
## When to use
|
|
6
|
+
|
|
7
|
+
Use it in any UXF web project that renders icons through `@uxf/ui/icon`. From a declarative config (`icons.config.js`) of inline SVGs and/or Font Awesome Pro references it produces an SVG sprite, one standalone SVG per icon, and a generated `icons.ts` that:
|
|
8
|
+
|
|
9
|
+
- exports `ICONS` (per-icon `{ w, h }` map) and `ICONS_VERSION` (md5 of the sprite), and
|
|
10
|
+
- augments `@uxf/ui/icon/theme`'s `IconsSet` interface, so `IconName` (`keyof IconsSet`) autocompletes every icon you declared.
|
|
11
|
+
|
|
12
|
+
This is a build-time dev tool run via the `icons-gen` binary. The runtime `<Icon>` component itself lives in `@uxf/ui/icon`, not here.
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
5
15
|
|
|
6
|
-
### Installation
|
|
7
|
-
Use npm or yarn to install:
|
|
8
|
-
```bash
|
|
9
|
-
npm i -D @uxf/icons-generator
|
|
10
16
|
```
|
|
11
|
-
```bash
|
|
12
17
|
yarn add -D @uxf/icons-generator
|
|
13
18
|
```
|
|
14
19
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
Requires Node `>= 24`. Peer dependency: `@uxf/core` (`11.114.0`). To use the Font Awesome Pro adapter, additionally install the per-style FA packages you reference (see [Providers](#providers--font-awesome-pro-adapter)).
|
|
21
|
+
|
|
22
|
+
## Quick start
|
|
23
|
+
|
|
24
|
+
1. Create `icons.config.js` in your project root:
|
|
25
|
+
|
|
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
|
+
|
|
40
|
+
2. Run the generator:
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
icons-gen
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
3. Wire the generated `ICONS` + sprite into `@uxf/ui` and render icons (see [Integration](#integration-with-uxfuiicon)).
|
|
47
|
+
|
|
48
|
+
## CLI
|
|
29
49
|
|
|
30
|
-
### Generating Icons
|
|
31
|
-
Run the generator:
|
|
32
50
|
```bash
|
|
33
|
-
icons-gen
|
|
51
|
+
icons-gen [options]
|
|
34
52
|
```
|
|
35
|
-
|
|
53
|
+
|
|
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
|
+
|
|
36
59
|
```bash
|
|
37
|
-
icons-gen --configFile=
|
|
60
|
+
icons-gen --configFile=custom.icons.config.js
|
|
38
61
|
```
|
|
39
62
|
|
|
40
|
-
## Configuration
|
|
63
|
+
## Configuration
|
|
64
|
+
|
|
65
|
+
The config file exports an `IconsConfig` object via `module.exports`.
|
|
66
|
+
|
|
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. |
|
|
41
77
|
|
|
42
|
-
|
|
43
|
-
|-------------------------|-----------------------------------------------|-----------------------------------------------------------------------|----------|----------------------------------|
|
|
44
|
-
| typescript | `boolean` | `true` | No | - |
|
|
45
|
-
| configDirectory | `string` | `"/src/config/"` | No | - |
|
|
46
|
-
| generatedDirectory | `string` | `"/public/icons-generated/"` | No | - |
|
|
47
|
-
| spriteFileName | `string` | `_icon-sprite.svg` | No | Specify custom sprite file name |
|
|
48
|
-
| typeName | `string` | `IconsSet` | No | - |
|
|
49
|
-
| customDefinitionContent | `string` | - | No | - |
|
|
50
|
-
| icons | `Record<string, SimpleIcon \| SizedIcon \| IconFromAdapterFunction>` | - | Yes | More details [here](#icon-types) |
|
|
51
|
-
| fallbackFilesDirectory | - | - | No | More details [here](#adapters) |
|
|
78
|
+
### Icon types
|
|
52
79
|
|
|
53
|
-
|
|
80
|
+
#### SimpleIcon
|
|
81
|
+
|
|
82
|
+
A single-size icon.
|
|
54
83
|
|
|
55
|
-
### SimpleIcon
|
|
56
84
|
```ts
|
|
57
85
|
type SimpleIcon = {
|
|
58
86
|
data: string;
|
|
@@ -60,113 +88,193 @@ type SimpleIcon = {
|
|
|
60
88
|
width: number;
|
|
61
89
|
};
|
|
62
90
|
```
|
|
63
|
-
|
|
91
|
+
|
|
64
92
|
```js
|
|
65
|
-
|
|
66
|
-
width:
|
|
67
|
-
height:
|
|
68
|
-
data: `<path fill="#
|
|
93
|
+
flame: {
|
|
94
|
+
width: 43,
|
|
95
|
+
height: 48,
|
|
96
|
+
data: `<path fill="#fff" d="M30.84 20.51a1.51 1.51 0 0 0-1.16-.71..." />`,
|
|
69
97
|
}
|
|
70
98
|
```
|
|
71
99
|
|
|
72
|
-
|
|
100
|
+
#### SizedIcon
|
|
101
|
+
|
|
102
|
+
Different SVG data per pixel size. Each size produces its own sprite symbol (`icon-sprite--<name>_<size>`) and standalone file (`<name>_<size>.svg`).
|
|
103
|
+
|
|
73
104
|
```ts
|
|
74
105
|
type SizedIcon = Record<number, string>;
|
|
75
106
|
```
|
|
76
|
-
|
|
107
|
+
|
|
77
108
|
```js
|
|
78
|
-
|
|
79
|
-
24: `<path fill="#
|
|
80
|
-
|
|
109
|
+
logo: {
|
|
110
|
+
24: `<path fill="#fff" d="..." />`,
|
|
111
|
+
48: `<path fill="#fff" d="..." />`,
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
#### IconFromProviderFunction
|
|
116
|
+
|
|
117
|
+
A function that resolves an icon from a provider (e.g. `faPro.icon(...)`). See [Providers](#providers--font-awesome-pro-adapter).
|
|
118
|
+
|
|
119
|
+
```ts
|
|
120
|
+
type IconFromProviderFunction = (config: _IconsConfig) => { width: number; height: number; path: string };
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### Module augmentation (`moduleDefinition`)
|
|
124
|
+
|
|
125
|
+
```ts
|
|
126
|
+
type ModuleDefinition = {
|
|
127
|
+
moduleName: string;
|
|
128
|
+
typeName: string;
|
|
129
|
+
format: "type" | "interface";
|
|
130
|
+
};
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Defaults to `{ moduleName: "@uxf/ui/icon/theme", typeName: "IconsSet", format: "interface" }`. With these defaults the generated file emits:
|
|
134
|
+
|
|
135
|
+
```ts
|
|
136
|
+
declare module "@uxf/ui/icon/theme" {
|
|
137
|
+
interface IconsSet {
|
|
138
|
+
"flame": true;
|
|
139
|
+
// ...one line per icon
|
|
140
|
+
}
|
|
81
141
|
}
|
|
82
142
|
```
|
|
83
143
|
|
|
84
|
-
|
|
144
|
+
This augmentation is what makes `@uxf/ui/icon`'s `IconName` (`keyof IconsSet`) aware of your icons. Set `moduleDefinition: false` to skip it.
|
|
145
|
+
|
|
146
|
+
## Providers — Font Awesome Pro adapter
|
|
147
|
+
|
|
148
|
+
The `faPro` adapter reads icon data from the per-style Font Awesome packages. Install only the styles you actually use.
|
|
149
|
+
|
|
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
|
+
|
|
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
|
+
|
|
172
|
+
### Local development setup
|
|
85
173
|
|
|
86
|
-
### Font Awesome Pro Adapter
|
|
87
|
-
#### Local Development Setup
|
|
88
174
|
```bash
|
|
89
|
-
|
|
175
|
+
# Set registry and token
|
|
90
176
|
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
|
|
91
177
|
npm config set "//npm.fontawesome.com/:_authToken" YOUR_TOKEN
|
|
92
178
|
|
|
93
|
-
|
|
94
|
-
npm install --save-dev @fortawesome/
|
|
179
|
+
# Install only the styles you use
|
|
180
|
+
npm install --save-dev @fortawesome/pro-regular-svg-icons @fortawesome/free-brands-svg-icons
|
|
95
181
|
```
|
|
96
182
|
|
|
97
|
-
|
|
183
|
+
### Usage
|
|
184
|
+
|
|
98
185
|
```js
|
|
99
|
-
const { faPro } = require(
|
|
186
|
+
const { faPro } = require("@uxf/icons-generator/src/providers/fa-pro");
|
|
100
187
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
188
|
+
module.exports = {
|
|
189
|
+
generatedDirectory: "/public/icons-generated/",
|
|
190
|
+
icons: {
|
|
191
|
+
// keeps the default name, e.g. "faPro_brands.linkedin"
|
|
192
|
+
...faPro.adapter(["brands.linkedin"]),
|
|
193
|
+
// or assign a custom name
|
|
194
|
+
twitter: faPro.icon("brands.twitter"),
|
|
195
|
+
},
|
|
196
|
+
};
|
|
197
|
+
```
|
|
108
198
|
|
|
109
|
-
|
|
110
|
-
If your project already contains generated icons, installing the Font Awesome Pro package is not necessary.
|
|
111
|
-
The package automatically generates a 'fallback file' for the icons in use, ensuring functionality even without
|
|
112
|
-
Font Awesome Pro. However, while this setup allows for the continued use of existing icons, adding new icons
|
|
113
|
-
from the adapter will not be possible.
|
|
199
|
+
`faPro.adapter([...])` names each icon `faPro_<namespace>.<name>`, while `faPro.icon(...)` lets you assign a custom key.
|
|
114
200
|
|
|
115
|
-
|
|
201
|
+
### Without the private key
|
|
116
202
|
|
|
117
|
-
|
|
118
|
-
Create and configure your icon settings in a config file at the project's root.
|
|
203
|
+
If your project already has generated icons, the Font Awesome Pro packages are not required to rebuild them. On each successful resolve the adapter caches the icon into `<configDirectory>/icons-fallbacks/faPro.json`; when a package is missing, it reads from that fallback file instead. Existing icons keep working, but **adding new** provider icons still requires the corresponding FA package installed.
|
|
119
204
|
|
|
120
|
-
|
|
121
|
-
Execute `icons-gen` to produce:
|
|
122
|
-
- SVG sprite and individual files.
|
|
123
|
-
- Definition file with icon list and sizes.
|
|
124
|
-
- Config file with icon version and sprite path.
|
|
205
|
+
## Generated output
|
|
125
206
|
|
|
126
|
-
|
|
127
|
-
Incorporate the generated output into your project. Example for TypeScript and React:
|
|
207
|
+
Running `icons-gen` (re)writes:
|
|
128
208
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
209
|
+
- `<generatedDirectory>/<spriteFileName>` — the SVG sprite: one `<symbol id="icon-sprite--<name>">` per icon (sized icons: `icon-sprite--<name>_<size>`).
|
|
210
|
+
- `<generatedDirectory>/<name>.svg` — one standalone SVG per icon (sized: `<name>_<size>.svg`). SVGs for icons removed from the config are cleaned up on the next run.
|
|
211
|
+
- `<configDirectory>/icons.ts` — the definition file (see below).
|
|
212
|
+
- `<configDirectory>/icons-fallbacks/<provider>.json` — cached provider icon data (e.g. `faPro.json`).
|
|
132
213
|
|
|
133
|
-
|
|
134
|
-
name: IconsSet;
|
|
135
|
-
};
|
|
214
|
+
The definition file exports:
|
|
136
215
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
<svg
|
|
142
|
-
height={sizes.h}
|
|
143
|
-
width={sizes.w}
|
|
144
|
-
preserveAspectRatio="xMidYMid meet"
|
|
145
|
-
role="img"
|
|
146
|
-
viewBox={`0 0 ${sizes.w} ${sizes.h}`}
|
|
147
|
-
>
|
|
148
|
-
<use xlinkHref={`${ICON_SPRITE}#icon-sprite--${name}`} />
|
|
149
|
-
</svg>
|
|
150
|
-
);
|
|
151
|
-
};
|
|
152
|
-
```
|
|
216
|
+
```ts
|
|
217
|
+
// this file is generated automatically, do not change anything manually in the contents of this file
|
|
218
|
+
|
|
219
|
+
export const ICONS_VERSION = "<md5 of the sprite file>";
|
|
153
220
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
221
|
+
export const ICONS = {
|
|
222
|
+
"flame": { w: 43, h: 48 },
|
|
223
|
+
"logo": [24, 48],
|
|
224
|
+
// ...
|
|
225
|
+
} as const;
|
|
157
226
|
|
|
158
|
-
//
|
|
227
|
+
export type IconsSet = keyof typeof ICONS; // name comes from `typeName`
|
|
159
228
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
/>
|
|
167
|
-
</Head>
|
|
229
|
+
declare module "@uxf/ui/icon/theme" { // omitted when moduleDefinition: false
|
|
230
|
+
interface IconsSet {
|
|
231
|
+
"flame": true;
|
|
232
|
+
// ...
|
|
233
|
+
}
|
|
234
|
+
}
|
|
168
235
|
```
|
|
169
236
|
|
|
170
|
-
|
|
171
|
-
|
|
237
|
+
## Integration with `@uxf/ui/icon`
|
|
238
|
+
|
|
239
|
+
1. Run `icons-gen` (wire it into a `gen`/prebuild script).
|
|
240
|
+
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
|
+
```tsx
|
|
243
|
+
import { UiContextProvider, UiContextType } from "@uxf/ui/context";
|
|
244
|
+
import { ICONS, ICONS_VERSION } from "@/config/icons";
|
|
245
|
+
|
|
246
|
+
const uiConfig: UiContextType = {
|
|
247
|
+
icon: {
|
|
248
|
+
iconsConfig: ICONS,
|
|
249
|
+
spriteFilePath: `/icons-generated/_icon-sprite.svg?v=${ICONS_VERSION}`,
|
|
250
|
+
},
|
|
251
|
+
// ...other UI context options (colorScheme, localeConfig, rasterImage, translationFn)
|
|
252
|
+
};
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
3. Render icons via `@uxf/ui`'s `<Icon>`. The `name` prop autocompletes every generated icon thanks to the module augmentation:
|
|
256
|
+
|
|
257
|
+
```tsx
|
|
258
|
+
import { Icon } from "@uxf/ui/icon";
|
|
259
|
+
|
|
260
|
+
<Icon name="flame" size={24} />;
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
4. (Optional) Preload the sprite:
|
|
264
|
+
|
|
265
|
+
```tsx
|
|
266
|
+
<link as="image" href={`/icons-generated/_icon-sprite.svg?v=${ICONS_VERSION}`} rel="preload" type="image/svg+xml" />
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
## Gotchas
|
|
270
|
+
|
|
271
|
+
- **Dev/build tool only.** The `<Icon>` runtime component is `@uxf/ui/icon`; this package just generates the sprite and types.
|
|
272
|
+
- **Paths are `cwd`-relative and need slashes.** `configDirectory` and `generatedDirectory` are joined onto `process.cwd()`, so both must start and end with `/`.
|
|
273
|
+
- **`typescript: false` currently has no effect.** The generator always emits `icons.ts` — the flag falls back to `true` internally.
|
|
274
|
+
- **The `faPro` provider is a deep import:** `@uxf/icons-generator/src/providers/fa-pro` (the published files preserve the `src/` layout). The `IconsConfig` type is at `@uxf/icons-generator/src/types`.
|
|
275
|
+
- **Keep the default `moduleName`** (`@uxf/ui/icon/theme`) unless you intentionally augment a different module; changing it breaks the `@uxf/ui` `IconName` inference.
|
|
276
|
+
|
|
277
|
+
## Links
|
|
172
278
|
|
|
279
|
+
- Repository: [gitlab.com/uxf-npm/icons-generator](https://gitlab.com/uxf-npm/icons-generator)
|
|
280
|
+
- Consumed by `@uxf/ui/icon` (the `<Icon>` component and `IconsSet`/`IconName` types).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uxf/icons-generator",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.122.4",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -25,7 +25,23 @@
|
|
|
25
25
|
"@uxf/core": "11.114.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@fortawesome/
|
|
28
|
+
"@fortawesome/duotone-light-svg-icons": "7.2.0",
|
|
29
|
+
"@fortawesome/duotone-regular-svg-icons": "7.2.0",
|
|
30
|
+
"@fortawesome/duotone-thin-svg-icons": "7.2.0",
|
|
31
|
+
"@fortawesome/free-brands-svg-icons": "7.2.0",
|
|
32
|
+
"@fortawesome/pro-duotone-svg-icons": "7.2.0",
|
|
33
|
+
"@fortawesome/pro-light-svg-icons": "7.2.0",
|
|
34
|
+
"@fortawesome/pro-regular-svg-icons": "7.2.0",
|
|
35
|
+
"@fortawesome/pro-solid-svg-icons": "7.2.0",
|
|
36
|
+
"@fortawesome/pro-thin-svg-icons": "7.2.0",
|
|
37
|
+
"@fortawesome/sharp-duotone-light-svg-icons": "7.2.0",
|
|
38
|
+
"@fortawesome/sharp-duotone-regular-svg-icons": "7.2.0",
|
|
39
|
+
"@fortawesome/sharp-duotone-solid-svg-icons": "7.2.0",
|
|
40
|
+
"@fortawesome/sharp-duotone-thin-svg-icons": "7.2.0",
|
|
41
|
+
"@fortawesome/sharp-light-svg-icons": "7.2.0",
|
|
42
|
+
"@fortawesome/sharp-regular-svg-icons": "7.2.0",
|
|
43
|
+
"@fortawesome/sharp-solid-svg-icons": "7.2.0",
|
|
44
|
+
"@fortawesome/sharp-thin-svg-icons": "7.2.0",
|
|
29
45
|
"@types/node": "24",
|
|
30
46
|
"@uxf/core": "11.114.0"
|
|
31
47
|
},
|
|
@@ -1,27 +1,93 @@
|
|
|
1
|
-
|
|
2
|
-
const writeFileSync = require("fs").writeFileSync;
|
|
1
|
+
"use strict";
|
|
3
2
|
|
|
4
|
-
const
|
|
5
|
-
|
|
3
|
+
const { existsSync, writeFileSync } = require("fs");
|
|
4
|
+
const path = require("path");
|
|
6
5
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
// Keep in sync with NAMESPACE_TO_PACKAGE in src/providers/fa-pro.ts.
|
|
7
|
+
const NAMESPACE_TO_PACKAGE = {
|
|
8
|
+
brands: "@fortawesome/free-brands-svg-icons",
|
|
9
|
+
duotone: "@fortawesome/pro-duotone-svg-icons",
|
|
10
|
+
"duotone-light": "@fortawesome/duotone-light-svg-icons",
|
|
11
|
+
"duotone-regular": "@fortawesome/duotone-regular-svg-icons",
|
|
12
|
+
"duotone-thin": "@fortawesome/duotone-thin-svg-icons",
|
|
13
|
+
light: "@fortawesome/pro-light-svg-icons",
|
|
14
|
+
regular: "@fortawesome/pro-regular-svg-icons",
|
|
15
|
+
"sharp-duotone-light": "@fortawesome/sharp-duotone-light-svg-icons",
|
|
16
|
+
"sharp-duotone-regular": "@fortawesome/sharp-duotone-regular-svg-icons",
|
|
17
|
+
"sharp-duotone-solid": "@fortawesome/sharp-duotone-solid-svg-icons",
|
|
18
|
+
"sharp-duotone-thin": "@fortawesome/sharp-duotone-thin-svg-icons",
|
|
19
|
+
"sharp-light": "@fortawesome/sharp-light-svg-icons",
|
|
20
|
+
"sharp-regular": "@fortawesome/sharp-regular-svg-icons",
|
|
21
|
+
"sharp-solid": "@fortawesome/sharp-solid-svg-icons",
|
|
22
|
+
"sharp-thin": "@fortawesome/sharp-thin-svg-icons",
|
|
23
|
+
solid: "@fortawesome/pro-solid-svg-icons",
|
|
24
|
+
thin: "@fortawesome/pro-thin-svg-icons",
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
const LEGACY_PACKAGE = "@fortawesome/fontawesome-pro";
|
|
28
|
+
|
|
29
|
+
const NODE_MODULES_PATH = process.env.NODE_MODULES_PATH ?? path.join(__dirname, "../../../node_modules");
|
|
10
30
|
|
|
11
|
-
|
|
31
|
+
const collectIconNames = (pkgName) => {
|
|
32
|
+
const pkgPath = path.join(NODE_MODULES_PATH, pkgName);
|
|
33
|
+
if (!existsSync(pkgPath)) {
|
|
34
|
+
return null;
|
|
35
|
+
}
|
|
36
|
+
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
|
37
|
+
const pkgExports = require(pkgPath);
|
|
38
|
+
const names = new Set();
|
|
39
|
+
for (const value of Object.values(pkgExports)) {
|
|
40
|
+
if (value && typeof value === "object" && typeof value.iconName === "string") {
|
|
41
|
+
names.add(value.iconName);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
return [...names].sort();
|
|
45
|
+
};
|
|
12
46
|
|
|
13
|
-
|
|
14
|
-
|
|
47
|
+
const generate = () => {
|
|
48
|
+
if (existsSync(path.join(NODE_MODULES_PATH, LEGACY_PACKAGE))) {
|
|
49
|
+
throw new Error(
|
|
50
|
+
`Package "${LEGACY_PACKAGE}" is installed but no longer used. The faPro adapter reads from per-style packages instead. Run \`yarn remove ${LEGACY_PACKAGE}\`.`,
|
|
51
|
+
);
|
|
52
|
+
}
|
|
15
53
|
|
|
16
|
-
|
|
17
|
-
|
|
54
|
+
const names = [];
|
|
55
|
+
const found = [];
|
|
56
|
+
const missing = [];
|
|
18
57
|
|
|
58
|
+
for (const [namespace, pkgName] of Object.entries(NAMESPACE_TO_PACKAGE)) {
|
|
59
|
+
const iconNames = collectIconNames(pkgName);
|
|
60
|
+
if (iconNames === null) {
|
|
61
|
+
missing.push(`${namespace} (${pkgName})`);
|
|
62
|
+
continue;
|
|
63
|
+
}
|
|
64
|
+
found.push(`${namespace}: ${iconNames.length}`);
|
|
65
|
+
for (const iconName of iconNames) {
|
|
19
66
|
names.push(`"${namespace}.${iconName}"`);
|
|
20
67
|
}
|
|
21
68
|
}
|
|
22
69
|
|
|
23
|
-
|
|
24
|
-
|
|
70
|
+
if (names.length === 0) {
|
|
71
|
+
throw new Error(
|
|
72
|
+
"No Font Awesome per-style packages found. Install at least one, e.g. `yarn add -D @fortawesome/pro-regular-svg-icons`.",
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
writeFileSync(
|
|
77
|
+
path.join(__dirname, "../src/fa-pro-types.ts"),
|
|
78
|
+
`export type FaProIconName = ${names.join(" | ")};\n`,
|
|
79
|
+
);
|
|
80
|
+
|
|
81
|
+
console.log(`Generated ${names.length} FA Pro icon names from ${found.length} package(s).`);
|
|
82
|
+
for (const line of found) {
|
|
83
|
+
console.log(` ${line}`);
|
|
84
|
+
}
|
|
85
|
+
if (missing.length > 0) {
|
|
86
|
+
console.log(`Skipped (not installed):`);
|
|
87
|
+
for (const line of missing) {
|
|
88
|
+
console.log(` ${line}`);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
25
91
|
};
|
|
26
92
|
|
|
27
|
-
|
|
93
|
+
generate();
|