@uxf/icons-generator 11.111.2 → 11.118.0

package/README.md

@@ -1,58 +1,70 @@
 # @uxf/icons-generator
+
 A well configurable tool for generating and managing custom SVG icons and sprites in web projects.
 
 ## Quick Start
 
 ### Installation
+
 Use npm or yarn to install:
+
 ```bash
 npm i -D @uxf/icons-generator
 ```
+
 ```bash
 yarn add -D @uxf/icons-generator
 ```
 
 ### Configuration
+
 Create a `icons.config.js` file in your project's root:
+
 ```ts
 module.exports = {
     icons: {
         test: {
             width: 24,
             height: 24,
-            data: `<path fill="#fecd09" d="M33.03 17.44c-1.68 0-3.12-.99-3.79-2.42h7.58a4.181 4.181 0 01-3.79 2.42z" />`
-        }
-    }
-}
+            data: `<path fill="#fecd09" d="M33.03 17.44c-1.68 0-3.12-.99-3.79-2.42h7.58a4.181 4.181 0 01-3.79 2.42z" />`,
+        },
+    },
+};
 ```
+
 See the full configuration options [here](#config).
 
 ### Generating Icons
+
 Run the generator:
+
 ```bash
 icons-gen
 ```
+
 For a custom config file name:
+
 ```bash
 icons-gen --configFile=yourConfigFileName.js
 ```
 
 ## Configuration Details
 
-| Key                     | Type                                          | Default                                                               | Required | Description                      |
-|-------------------------|-----------------------------------------------|-----------------------------------------------------------------------|----------|----------------------------------|
-| typescript              | `boolean`                                     | `true`                                                                | No       | -                                |
-| configDirectory         | `string`                                      | `"/src/config/"`                                                      | No       | -                                |
-| generatedDirectory      | `string`                                      | `"/public/icons-generated/"`                                          | No       | -                                |
-| spriteFileName          | `string`                                      | `_icon-sprite.svg`                                                    | No       | Specify custom sprite file name  |
-| typeName                | `string`                                      | `IconsSet`                                                            | No       | -                                |
-| customDefinitionContent | `string`                                      | -                                                                     | No       | -                                |
-| icons                   | `Record<string, SimpleIcon \| SizedIcon \| IconFromAdapterFunction>` | -                                                                     | Yes      | More details [here](#icon-types) |
-| fallbackFilesDirectory  | -                                             | -                                                                     | No       | More details [here](#adapters)   |
+| Key                     | Type                                                                 | Default                      | Required | Description                      |
+| ----------------------- | -------------------------------------------------------------------- | ---------------------------- | -------- | -------------------------------- |
+| typescript              | `boolean`                                                            | `true`                       | No       | -                                |
+| configDirectory         | `string`                                                             | `"/src/config/"`             | No       | -                                |
+| generatedDirectory      | `string`                                                             | `"/public/icons-generated/"` | No       | -                                |
+| spriteFileName          | `string`                                                             | `_icon-sprite.svg`           | No       | Specify custom sprite file name  |
+| typeName                | `string`                                                             | `IconsSet`                   | No       | -                                |
+| customDefinitionContent | `string`                                                             | -                            | No       | -                                |
+| icons                   | `Record<string, SimpleIcon \| SizedIcon \| IconFromAdapterFunction>` | -                            | Yes      | More details [here](#icon-types) |
+| fallbackFilesDirectory  | -                                                                    | -                            | No       | More details [here](#adapters)   |
 
 ## Icon Types
 
 ### SimpleIcon
+
 ```ts
 type SimpleIcon = {
     data: string;
@@ -60,7 +72,9 @@ type SimpleIcon = {
     width: number;
 };
 ```
+
 Example:
+
 ```js
 test: {
     width: 50,
@@ -70,10 +84,13 @@ test: {
 ```
 
 ### SizedIcon
+
 ```ts
 type SizedIcon = Record<number, string>;
 ```
+
 Example:
+
 ```js
 test: {
     24: `<path fill="#fecd09" d="M33.03 17.44c-1.68 0-3.12-.99-3.79-2.42h7.58a4.181 4.181 0 01-3.79 2.42z" />`,
@@ -84,17 +101,35 @@ test: {
 ## Predefined providers
 
 ### Font Awesome Pro Adapter
+
+The adapter reads icons from per-style packages — install only the styles you actually use:
+
+| Namespace                                                                                           | Package                                          |
+| --------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
+| `brands.*`                                                                                          | `@fortawesome/free-brands-svg-icons`             |
+| `regular.*`                                                                                         | `@fortawesome/pro-regular-svg-icons`             |
+| `solid.*`                                                                                           | `@fortawesome/pro-solid-svg-icons`               |
+| `light.*`                                                                                           | `@fortawesome/pro-light-svg-icons`               |
+| `thin.*`                                                                                            | `@fortawesome/pro-thin-svg-icons`                |
+| `duotone.*`, `duotone-regular.*`, `duotone-light.*`, `duotone-thin.*`                               | `@fortawesome/pro-duotone[-{variant}]-svg-icons` |
+| `sharp-regular.*`, `sharp-solid.*`, `sharp-light.*`, `sharp-thin.*`                                 | `@fortawesome/sharp-{variant}-svg-icons`         |
+| `sharp-duotone-regular.*`, `sharp-duotone-solid.*`, `sharp-duotone-light.*`, `sharp-duotone-thin.*` | `@fortawesome/sharp-duotone-{variant}-svg-icons` |
+
+The legacy `@fortawesome/fontawesome-pro` monolith is no longer supported — uninstall it if present.
+
 #### Local Development Setup
+
 ```bash
-// Set registry and token
+# Set registry and token
 npm config set "@fortawesome:registry" https://npm.fontawesome.com/
 npm config set "//npm.fontawesome.com/:_authToken" YOUR_TOKEN
 
-// Install package
-npm install --save-dev @fortawesome/fontawesome-pro
+# Install only the styles you use
+npm install --save-dev @fortawesome/pro-regular-svg-icons @fortawesome/free-brands-svg-icons
 ```
 
 #### Usage
+
 ```js
 const { faPro } = require('@uxf/icons-generator/providers/fa-pro');
 
@@ -104,10 +139,11 @@ icons: {
     // to define custom name for an icon
     twitter: faPro.icon("brands.twitter"),
 }
-````
+```
 
 #### Without Private Key
-If your project already contains generated icons, installing the Font Awesome Pro package is not necessary.
+
+If your project already contains generated icons, installing the Font Awesome Pro packages is not necessary.
 The package automatically generates a 'fallback file' for the icons in use, ensuring functionality even without
 Font Awesome Pro. However, while this setup allows for the continued use of existing icons, adding new icons
 from the adapter will not be possible.
@@ -115,15 +151,19 @@ from the adapter will not be possible.
 ## Recommended Usage (Step-by-Step)
 
 ### 1. Configuration
+
 Create and configure your icon settings in a config file at the project's root.
 
 ### 2. Icon Generation
+
 Execute `icons-gen` to produce:
+
 - SVG sprite and individual files.
 - Definition file with icon list and sizes.
 - Config file with icon version and sprite path.
 
 ### 3. Icon Component Setup
+
 Incorporate the generated output into your project. Example for TypeScript and React:
 
 ```tsx
@@ -152,21 +192,17 @@ export const Icon: FC<IconProps> = ({ name }) => {
 ```
 
 ### 4. Sprite Preloading (Optional)
+
 ```tsx
 import { ICON_SPRITE, ICONS_VERSION } from "src/config/icons-config";
 
 // code here...
 
 <Head>
-    <link
-        as="image"
-        href={`${ICON_SPRITE}?v=${ICONS_VERSION}`}
-        rel="preload"
-        type="image/svg+xml"
-    />
-</Head>
+    <link as="image" href={`${ICON_SPRITE}?v=${ICONS_VERSION}`} rel="preload" type="image/svg+xml" />
+</Head>;
 ```
 
 ### 5. Verification
-Run `icons-check` to ensure icon consistency with the config. It's recommended to integrate this check into your CI process.
 
+Run `icons-check` to ensure icon consistency with the config. It's recommended to integrate this check into your CI process.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/icons-generator",
-    "version": "11.111.2",
+    "version": "11.118.0",
     "description": "",
     "main": "index.js",
     "scripts": {
@@ -22,12 +22,28 @@
         "yargs": "18.0.0"
     },
     "peerDependencies": {
-        "@uxf/core": "11.111.2"
+        "@uxf/core": "11.114.0"
     },
     "devDependencies": {
-        "@fortawesome/fontawesome-pro": "7.0.0",
+        "@fortawesome/duotone-light-svg-icons": "7.2.0",
+        "@fortawesome/duotone-regular-svg-icons": "7.2.0",
+        "@fortawesome/duotone-thin-svg-icons": "7.2.0",
+        "@fortawesome/free-brands-svg-icons": "7.2.0",
+        "@fortawesome/pro-duotone-svg-icons": "7.2.0",
+        "@fortawesome/pro-light-svg-icons": "7.2.0",
+        "@fortawesome/pro-regular-svg-icons": "7.2.0",
+        "@fortawesome/pro-solid-svg-icons": "7.2.0",
+        "@fortawesome/pro-thin-svg-icons": "7.2.0",
+        "@fortawesome/sharp-duotone-light-svg-icons": "7.2.0",
+        "@fortawesome/sharp-duotone-regular-svg-icons": "7.2.0",
+        "@fortawesome/sharp-duotone-solid-svg-icons": "7.2.0",
+        "@fortawesome/sharp-duotone-thin-svg-icons": "7.2.0",
+        "@fortawesome/sharp-light-svg-icons": "7.2.0",
+        "@fortawesome/sharp-regular-svg-icons": "7.2.0",
+        "@fortawesome/sharp-solid-svg-icons": "7.2.0",
+        "@fortawesome/sharp-thin-svg-icons": "7.2.0",
         "@types/node": "24",
-        "@uxf/core": "11.111.2"
+        "@uxf/core": "11.114.0"
     },
     "author": "",
     "license": "ISC",

package/scripts/generate-fa-pro-types.js

@@ -1,27 +1,93 @@
-const readdirSync = require("fs").readdirSync;
-const writeFileSync = require("fs").writeFileSync;
+"use strict";
 
-const getFaProIconNamesType = () => {
-    const dir = readdirSync(__dirname + "/../../../node_modules/@fortawesome/fontawesome-pro/svgs/");
+const { existsSync, writeFileSync } = require("fs");
+const path = require("path");
 
-    if (!dir.length) {
-        throw new Error("You need to install @fortawesome/fontawesome-pro first!");
-    }
+// Keep in sync with NAMESPACE_TO_PACKAGE in src/providers/fa-pro.ts.
+const NAMESPACE_TO_PACKAGE = {
+    brands: "@fortawesome/free-brands-svg-icons",
+    duotone: "@fortawesome/pro-duotone-svg-icons",
+    "duotone-light": "@fortawesome/duotone-light-svg-icons",
+    "duotone-regular": "@fortawesome/duotone-regular-svg-icons",
+    "duotone-thin": "@fortawesome/duotone-thin-svg-icons",
+    light: "@fortawesome/pro-light-svg-icons",
+    regular: "@fortawesome/pro-regular-svg-icons",
+    "sharp-duotone-light": "@fortawesome/sharp-duotone-light-svg-icons",
+    "sharp-duotone-regular": "@fortawesome/sharp-duotone-regular-svg-icons",
+    "sharp-duotone-solid": "@fortawesome/sharp-duotone-solid-svg-icons",
+    "sharp-duotone-thin": "@fortawesome/sharp-duotone-thin-svg-icons",
+    "sharp-light": "@fortawesome/sharp-light-svg-icons",
+    "sharp-regular": "@fortawesome/sharp-regular-svg-icons",
+    "sharp-solid": "@fortawesome/sharp-solid-svg-icons",
+    "sharp-thin": "@fortawesome/sharp-thin-svg-icons",
+    solid: "@fortawesome/pro-solid-svg-icons",
+    thin: "@fortawesome/pro-thin-svg-icons",
+};
+
+const LEGACY_PACKAGE = "@fortawesome/fontawesome-pro";
+
+const NODE_MODULES_PATH = process.env.NODE_MODULES_PATH ?? path.join(__dirname, "../../../node_modules");
 
-    let names = [];
+const collectIconNames = (pkgName) => {
+    const pkgPath = path.join(NODE_MODULES_PATH, pkgName);
+    if (!existsSync(pkgPath)) {
+        return null;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const pkgExports = require(pkgPath);
+    const names = new Set();
+    for (const value of Object.values(pkgExports)) {
+        if (value && typeof value === "object" && typeof value.iconName === "string") {
+            names.add(value.iconName);
+        }
+    }
+    return [...names].sort();
+};
 
-    for (const namespace of dir) {
-        const icons = readdirSync(__dirname + `/../../../node_modules/@fortawesome/fontawesome-pro/svgs/${namespace}`);
+const generate = () => {
+    if (existsSync(path.join(NODE_MODULES_PATH, LEGACY_PACKAGE))) {
+        throw new Error(
+            `Package "${LEGACY_PACKAGE}" is installed but no longer used. The faPro adapter reads from per-style packages instead. Run \`yarn remove ${LEGACY_PACKAGE}\`.`,
+        );
+    }
 
-        for (const icon of icons) {
-            const iconName = icon.replace(/\.svg$/, "");
+    const names = [];
+    const found = [];
+    const missing = [];
 
+    for (const [namespace, pkgName] of Object.entries(NAMESPACE_TO_PACKAGE)) {
+        const iconNames = collectIconNames(pkgName);
+        if (iconNames === null) {
+            missing.push(`${namespace} (${pkgName})`);
+            continue;
+        }
+        found.push(`${namespace}: ${iconNames.length}`);
+        for (const iconName of iconNames) {
             names.push(`"${namespace}.${iconName}"`);
         }
     }
 
-    writeFileSync(__dirname + "/../src/fa-pro-types.ts", `export type FaProIconName = ${names.join(" | ")};\n`);
-    console.log(`Great, generated ${names.length} FA Pro icon names!`);
+    if (names.length === 0) {
+        throw new Error(
+            "No Font Awesome per-style packages found. Install at least one, e.g. `yarn add -D @fortawesome/pro-regular-svg-icons`.",
+        );
+    }
+
+    writeFileSync(
+        path.join(__dirname, "../src/fa-pro-types.ts"),
+        `export type FaProIconName = ${names.join(" | ")};\n`,
+    );
+
+    console.log(`Generated ${names.length} FA Pro icon names from ${found.length} package(s).`);
+    for (const line of found) {
+        console.log(`  ${line}`);
+    }
+    if (missing.length > 0) {
+        console.log(`Skipped (not installed):`);
+        for (const line of missing) {
+            console.log(`  ${line}`);
+        }
+    }
 };
 
-getFaProIconNamesType();
+generate();