@uxf/icons-generator 11.15.1 → 11.23.0

package/README.md

@@ -13,7 +13,7 @@ yarn add -D @uxf/icons-generator
 ```
 
 ### Configuration
-Create a `icons.config.ts` file in your project's root:
+Create a `icons.config.js` file in your project's root:
 ```ts
 module.exports = {
     icons: {
@@ -39,22 +39,20 @@ icons-gen --configFile=yourConfigFileName.js
 
 ## Configuration Details
 
-| Key                     | Type                                      | Default                                                               | Required | Description                      |
-|-------------------------|-------------------------------------------|-----------------------------------------------------------------------|----------|----------------------------------|
-| mode                    | `"simple" \| "sizes"`                     | `"simple"`                                                            | No       | -                                |
-| 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>` | -                                                                     | Yes      | More details [here](#icon-types) |
-| adapters                | -                                         | -                                                                     | No       | More details [here](#adapters)   |
-| 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 (mode "simple")
+### SimpleIcon
 ```ts
 type SimpleIcon = {
     data: string;
@@ -71,7 +69,7 @@ test: {
 }
 ```
 
-### SizedIcon (mode "sizes")
+### SizedIcon
 ```ts
 type SizedIcon = Record<number, string>;
 ```
@@ -83,38 +81,7 @@ test: {
 }
 ```
 
-## Adapters
-Extend icon generation with adapters for external sources.
-
-### Adapter Structure
-An adapter in this context is a function designed to retrieve specific icon information, such as size and SVG path, based on the icon's name.
-
-#### Example
-```ts
-export const getIconFromMyCustomAdapter = (iconName: string) => {
-    const icon = findIconDefinition({ iconName });
-    return { width: icon.width, height: icon.height, path: icon.data };
-};
-```
-
-Integration into your icons configuration is straightforward:
-```ts
-import { getIconFromMyCustomAdapter } from "./my-custom-adapter";
-
-adapters: {
-    myAdapter: {
-        icons: ["user"],
-        getIcon: getIconFromMyCustomAdapter,
-    }
-}
-```
-
-For type safety, you can create a typed configuration. Use a generated type from your icon list as a generic for the icons configuration:
-```ts
-const iconConfig: IconsConfig<{ myAdapter: MyAdapterIconNames; }> = {};
-```
-
-## Predefined adapters
+## Predefined providers
 
 ### Font Awesome Pro Adapter
 #### Local Development Setup
@@ -127,6 +94,18 @@ npm config set "//npm.fontawesome.com/:_authToken" YOUR_TOKEN
 npm install --save-dev @fortawesome/fontawesome-pro
 ```
 
+#### Usage
+```js
+const { faPro } = require('@uxf/icons-generator/providers/fa-pro');
+
+icons: {
+    // for icons with default name (preferred)
+    ...faPro.adapter(["brands.linkedin"]),
+    // 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.
 The package automatically generates a 'fallback file' for the icons in use, ensuring functionality even without

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@uxf/icons-generator",
-  "version": "11.15.1",
+  "version": "11.23.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "build": "npm run-script clean && npm run-script compile",
     "clean": "rm -rf ./dist",
     "compile": "tsc -P tsconfig.json",
-    "test": "NODE_MODULES_PATH=../../node_modules ts-node ./bin/icons-gen.ts --configFile=tests/icons.config.ts",
+    "test": "NODE_MODULES_PATH=../../node_modules ts-node ./bin/icons-gen.ts --configFile=tests/icons.config.js",
     "typecheck": "tsc --noEmit --skipLibCheck"
   },
   "publishConfig": {

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

@@ -0,0 +1,27 @@
+const readdirSync = require("fs").readdirSync;
+const writeFileSync = require("fs").writeFileSync;
+
+const getFaProIconNamesType = () => {
+    const dir = readdirSync(__dirname + "/../../../node_modules/@fortawesome/fontawesome-pro/svgs/");
+
+    if (!dir.length) {
+        throw new Error("You need to install @fortawesome/fontawesome-pro first!");
+    }
+
+    let names = [];
+
+    for (const namespace of dir) {
+        const icons = readdirSync(__dirname + `/../../../node_modules/@fortawesome/fontawesome-pro/svgs/${namespace}`);
+
+        for (const icon of icons) {
+            const iconName = icon.replace(/\.svg$/, "");
+
+            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!`);
+};
+
+getFaProIconNamesType();