@wkovacs64/add-icon 0.1.0-dev.8f859e16 → 0.1.0-dev.e2dd6945

package/README.md

@@ -14,72 +14,27 @@ npm install @wkovacs64/add-icon
 Or use it directly with npx without installing:
 
 ```bash
-npx @wkovacs64/add-icon heroicons:arrow-up-circle
+npx @wkovacs64/add-icon <icon> [options]
 ```
 
 ## Usage
 
 ### Basic Usage
 
-Download an icon:
+Download an icon to the specified directory:
 
 ```bash
-npx @wkovacs64/add-icon heroicons:arrow-up-circle
-```
-
-Specify an output directory:
-
-```bash
-npx @wkovacs64/add-icon heroicons:arrow-up-circle --output-dir ./my-icons
+npx @wkovacs64/add-icon heroicons:arrow-up-circle --output-dir ./app/assets/svg-icons
 ```
 
 ### Transformations
 
-Apply built-in transformations:
-
-```bash
-# Remove width and height attributes
-npx @wkovacs64/add-icon heroicons:arrow-up-circle --remove-size
-
-# Optimize SVG with SVGO
-npx @wkovacs64/add-icon heroicons:arrow-up-circle --optimize
-
-# Minify SVG
-npx @wkovacs64/add-icon heroicons:arrow-up-circle --minify
-
-# Apply multiple transformations
-npx @wkovacs64/add-icon heroicons:arrow-up-circle --remove-size --optimize --minify
-```
-
-### Custom Transformations
-
-You can write custom transforms in either JavaScript or TypeScript!
-
-#### JavaScript Transform
-
-Create a custom transform file (e.g., `my-transform.js`):
-
-```js
-/**
- * Custom transform to add a title element to SVG
- * @param {Object} args - Transform arguments
- * @param {string} args.svg - SVG content
- * @param {string} args.iconName - Icon name (e.g., 'heroicons:arrow-up-circle')
- * @param {string} args.prefix - Icon set prefix (e.g., 'heroicons')
- * @param {string} args.name - Icon name without prefix (e.g., 'arrow-up-circle')
- * @returns {string} - Transformed SVG
- */
-export default function addTitle(args) {
-  const titleElement = `<title>${args.iconName}</title>`;
-  return args.svg.replace(/<svg([^>]*)>/, `<svg$1>${titleElement}`);
-}
-```
+The tool fetches SVG icons directly from the Iconify API with width and height attributes removed automatically. You can optionally provide a transform file using either JavaScript or TypeScript containing custom transformations for more advanced modifications.
 
-#### TypeScript Transform
-
-Create a custom transform file (e.g., `my-transform.ts`):
+#### TypeScript Transform Example
 
 ```ts
+// my-transform.ts
 import type { TransformArgs } from '@wkovacs64/add-icon';
 
 /**
@@ -96,86 +51,29 @@ export default function addTitle(args: TransformArgs): string {
 Then use it with the CLI:
 
 ```bash
-# JavaScript transform
-npx @wkovacs64/add-icon heroicons:arrow-up-circle --transform ./my-transform.js
-
-# TypeScript transform
 npx @wkovacs64/add-icon heroicons:arrow-up-circle --transform ./my-transform.ts
 ```
 
-## Configuration File
+### Configuration File
 
-You can create a configuration file (`add-icon.config.js`) in your project root:
+You can create a configuration file in your project root, using either JavaScript (`add-icon.config.js`) or TypeScript (`add-icon.config.ts`).
 
-```js
-import { transforms } from '@wkovacs64/add-icon';
+#### TypeScript Configuration Example
+
+```ts
+import type { Config, TransformArgs, TransformFunction } from '@wkovacs64/add-icon';
 
 // Define custom transform
-function addCustomAttribute(args) {
+function addCustomAttribute(args: TransformArgs): string {
   return args.svg.replace(/<svg/, `<svg data-icon="${args.iconName}"`);
 }
 
-export default {
+const config = {
   outputDir: './assets/icons',
-  transforms: [transforms.removeSize, transforms.optimizeSvg, addCustomAttribute],
-};
-```
-
-## Using as a Library
-
-You can also use iconify-cli as a library in your own projects:
-
-### JavaScript
-
-```js
-import { downloadIcon, transforms } from '@wkovacs64/add-icon';
-
-// Create custom transform
-function addCustomAttribute(args) {
-  return args.svg.replace(/<svg/, `<svg data-custom="${args.iconSet}"`);
-}
-
-// Download an icon with transforms
-async function downloadCustomIcon() {
-  const iconPath = await downloadIcon('heroicons:heart', {
-    outputDir: './icons',
-    transforms: [transforms.removeSize, transforms.optimizeSvg, addCustomAttribute],
-  });
-
-  console.log(`Icon saved to: ${iconPath}`);
-}
-
-downloadCustomIcon();
-```
-
-### TypeScript
-
-```ts
-import { downloadIcon, transforms, type TransformArgs } from '@wkovacs64/add-icon';
-
-// Create custom transform
-const addCustomAttribute = (args: TransformArgs): string => {
-  return args.svg.replace(/<svg/, `<svg data-custom="${args.iconSet}"`);
-};
-
-// Download an icon with transforms
-async function downloadCustomIcon(): Promise<void> {
-  try {
-    const iconPath = await downloadIcon('heroicons:heart', {
-      outputDir: './icons',
-      transforms: [transforms.removeSize, transforms.optimizeSvg, addCustomAttribute],
-    });
-
-    console.log(`Icon saved to: ${iconPath}`);
-  } catch (error) {
-    console.error(
-      'Error downloading icon:',
-      error instanceof Error ? error.message : String(error),
-    );
-  }
-}
+  transforms: [addCustomAttribute],
+} satisfies Config;
 
-downloadCustomIcon();
+export default config;
 ```
 
 ## License

package/bin/add-icon.js

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+
+import url from 'node:url';
+import path from 'node:path';
+import os from 'node:os';
+import { runCli } from '../dist/index.js';
+
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// This logic ensures we only run the CLI when this file is called directly
+// and not when it's imported as a module
+if (
+  os.platform() === 'win32'
+    ? process.argv[1] === __filename
+    : process.argv[1] === __filename || process.argv[1] === __dirname
+) {
+  runCli();
+}

package/dist/config.d.ts

@@ -1,11 +1,11 @@
-import type { IconifyConfig } from './types.js';
+import type { Config } from './types.js';
 /**
  * Default configuration
  */
-export declare const defaultConfig: IconifyConfig;
+export declare const defaultConfig: Config;
 /**
  * Loads configuration from file if it exists
  * @param configPath - Path to config file
  * @returns Configuration object
  */
-export declare function loadConfig(configPath?: string): Promise<IconifyConfig>;
+export declare function loadConfig(configPath?: string): Promise<Config>;

package/dist/config.js

@@ -1,5 +1,6 @@
-import fs from 'node:fs';
+import { existsSync } from 'node:fs';
 import path from 'node:path';
+import { importModule } from './import-module.js';
 /**
  * Default configuration
  */
@@ -12,19 +13,43 @@ export const defaultConfig = {
  * @returns Configuration object
  */
 export async function loadConfig(configPath) {
-    // Use provided config path or look for default config file
-    const configFile = configPath || path.resolve(process.cwd(), 'add-icon.config.js');
     try {
-        if (fs.existsSync(configFile)) {
-            // For ESM, we need to use dynamic import with file:// protocol
-            const fileUrl = `file://${configFile}`;
-            const config = await import(fileUrl);
+        // If a specific config path is provided, use it
+        if (configPath) {
+            // Use the unified import method for both JS and TS files
+            const config = await importModule(configPath);
             return { ...defaultConfig, ...config.default };
         }
+        // Try to find a config file in the current directory, checking both JS and TS
+        const jsConfigPath = path.resolve(process.cwd(), 'add-icon.config.js');
+        const tsConfigPath = path.resolve(process.cwd(), 'add-icon.config.ts');
+        // Check for TypeScript config first
+        if (existsSync(tsConfigPath)) {
+            try {
+                const config = await importModule(tsConfigPath);
+                return { ...defaultConfig, ...config.default };
+            }
+            catch (err) {
+                console.error('Error loading TypeScript config, falling back to default config:', err);
+                return defaultConfig;
+            }
+        }
+        // Then check for JavaScript config
+        if (existsSync(jsConfigPath)) {
+            try {
+                const config = await importModule(jsConfigPath);
+                return { ...defaultConfig, ...config.default };
+            }
+            catch (err) {
+                console.error('Error loading JavaScript config, falling back to default config:', err);
+                return defaultConfig;
+            }
+        }
+        // Fall back to default config
+        return defaultConfig;
     }
     catch (error) {
-        const errorMessage = error instanceof Error ? error.message : String(error);
-        console.error(`Error loading config file: ${errorMessage}`);
+        console.error('Error loading config, using default config:', error);
+        return defaultConfig;
     }
-    return defaultConfig;
 }

package/dist/iconify.d.ts

@@ -1,4 +1,4 @@
-import type { IconifyConfig } from './types.js';
+import type { Config } from './types.js';
 /**
  * Parses an icon reference into iconSet and iconName
  * @param iconReference - Reference in format 'iconSet:iconName'
@@ -14,4 +14,4 @@ export declare function parseIconReference(iconReference: string): {
  * @param config - Configuration options
  * @returns Path to saved icon file
  */
-export declare function downloadIcon(iconReference: string, config: IconifyConfig): Promise<string>;
+export declare function downloadIcon(iconReference: string, config: Config): Promise<string>;

package/dist/import-module.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Imports a module file (JavaScript or TypeScript) by processing it with esbuild
+ * @param filePath - Path to module file (JS or TS)
+ * @returns Module exports
+ */
+export declare function importModule(filePath: string): Promise<any>;

package/dist/import-module.js

@@ -0,0 +1,35 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import * as esbuild from 'esbuild';
+/**
+ * Imports a module file (JavaScript or TypeScript) by processing it with esbuild
+ * @param filePath - Path to module file (JS or TS)
+ * @returns Module exports
+ */
+export async function importModule(filePath) {
+    const absolutePath = path.resolve(filePath);
+    try {
+        // Read the module file content
+        const code = await fs.readFile(absolutePath, "utf-8");
+        // Determine the appropriate loader based on file extension
+        const loader = absolutePath.endsWith('.ts') ? 'ts' : 'js';
+        // Use esbuild to transform the code to ESM JS
+        const result = await esbuild.transform(code, {
+            loader, // Automatically use the appropriate loader
+            format: "esm", // Output format
+            sourcemap: false, // Disable source maps for data URI
+            sourcefile: absolutePath, // Helps with error messages
+            target: 'esnext',
+        });
+        const jsCode = result.code;
+        // Create data URI and import
+        const base64Code = Buffer.from(jsCode).toString("base64");
+        const dataUri = `data:text/javascript;base64,${base64Code}`;
+        // Import the transformed code as a module
+        return await import(dataUri);
+    }
+    catch (error) {
+        console.error(`Error importing module ${filePath} with esbuild:`, error);
+        throw error;
+    }
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-#!/usr/bin/env node
-import type { IconTransform, TransformArgs } from './types.js';
-export type { IconTransform, TransformArgs };
+import type { TransformFunction, TransformArgs, Config } from './types.js';
+export type { TransformFunction, TransformArgs, Config };
 export { downloadIcon, parseIconReference } from './iconify.js';
+export { loadConfig, defaultConfig } from './config.js';
+export declare function runCli(): void;

package/dist/index.js

@@ -1,25 +1,29 @@
-#!/usr/bin/env node
-import fs from 'node:fs';
 import path from 'node:path';
-import url from 'node:url';
-import os from 'node:os';
-import { execSync } from 'node:child_process';
 import { Command } from 'commander';
 import { downloadIcon } from './iconify.js';
 import { loadConfig } from './config.js';
+import { importModule } from './import-module.js';
+import { getPackageInfo } from './package-info.js';
 // Re-export other useful functions
 export { downloadIcon, parseIconReference } from './iconify.js';
+export { loadConfig, defaultConfig } from './config.js';
 // Create CLI program
 const program = new Command();
-program
-    .name('add-icon')
-    .description('Download and transform icons from Iconify')
-    .version('1.0.0')
-    .argument('<icon>', 'Icon reference (e.g., heroicons:arrow-up-circle)')
-    .option('-o, --output-dir <dir>', 'Directory to save icon')
-    .option('-c, --config <path>', 'Path to config file')
-    .option('-t, --transform <path>', 'Path to custom transform module (.js or .ts)')
-    .action(async (icon, options) => {
+// Set up the program with package info
+const setupProgram = async () => {
+    const { name, version, description } = await getPackageInfo();
+    return program
+        .name(name.split('/').pop() || name)
+        .description(description)
+        .version(version, '-v, --version', 'Output the current version')
+        .argument('<icon>', 'Icon reference (e.g., heroicons:arrow-up-circle)')
+        .option('-o, --output-dir <dir>', 'Directory to save icon')
+        .option('-c, --config <path>', 'Path to config file')
+        .option('-t, --transform <path>', 'Path to custom transform module (.js or .ts)');
+};
+// Initialize the program
+const initializedProgram = await setupProgram();
+initializedProgram.action(async (icon, options) => {
     try {
         // Load config (first from config file, then override with CLI options)
         const config = await loadConfig(options.config);
@@ -32,30 +36,14 @@ program
             try {
                 const transformPath = path.resolve(process.cwd(), options.transform);
                 let customTransform;
-                // Handle TypeScript files
-                if (transformPath.endsWith('.ts')) {
-                    // Create a temporary JS file for the transform
-                    const jsPath = transformPath.replace(/\.ts$/, '.js');
-                    try {
-                        // Use tsc to compile the TypeScript file
-                        execSync(`npx tsc "${transformPath}" --outDir "${path.dirname(transformPath)}" --target es2020 --module NodeNext --moduleResolution NodeNext --esModuleInterop`);
-                        // Import the compiled JS file
-                        customTransform = await import(`file://${jsPath}`);
-                        // Clean up temporary JS file if not in dev mode
-                        if (process.env.NODE_ENV !== 'development') {
-                            fs.unlinkSync(jsPath);
-                        }
-                    }
-                    catch (err) {
-                        const errorMessage = err instanceof Error ? err.message : String(err);
-                        console.error(`Error transpiling TypeScript transform: ${errorMessage}`);
-                        console.error('Make sure TypeScript is installed or use a JavaScript (.js) transform file.');
-                        process.exit(1);
-                    }
+                try {
+                    // Use unified import method for both JS and TS files
+                    customTransform = await importModule(transformPath);
                 }
-                else {
-                    // For JavaScript files, use dynamic import
-                    customTransform = await import(`file://${transformPath}`);
+                catch (err) {
+                    const errorMessage = err instanceof Error ? err.message : String(err);
+                    console.error(`Error loading transform: ${errorMessage}`);
+                    process.exit(1);
                 }
                 if (customTransform && typeof customTransform.default === 'function') {
                     config.transforms = [customTransform.default];
@@ -82,12 +70,7 @@ program
         process.exit(1);
     }
 });
-const __filename = url.fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-// This logic only runs when executed directly as CLI, not when imported as a library
-if (os.platform() === 'win32'
-    ? process.argv[1] === __filename
-    : process.argv[1] === __filename || process.argv[1] === __dirname) {
-    // Parse command line arguments
-    program.parse();
+// Parse command line arguments if called directly
+export function runCli() {
+    program.parse(process.argv);
 }

package/dist/package-info.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Loads package info from package.json
+ * @returns Package info with name, version, and description
+ */
+export declare function getPackageInfo(): Promise<{
+    name: string;
+    version: string;
+    description: string;
+}>;

package/dist/package-info.js

@@ -0,0 +1,34 @@
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import fs from 'node:fs/promises';
+/**
+ * Loads package info from package.json
+ * @returns Package info with name, version, and description
+ */
+export async function getPackageInfo() {
+    // Get the directory of the current module
+    const currentFileUrl = import.meta.url;
+    const currentFilePath = fileURLToPath(currentFileUrl);
+    const currentDir = path.dirname(currentFilePath);
+    // Go up one level from src/ to the package root
+    const packageJsonPath = path.resolve(currentDir, '..', 'package.json');
+    try {
+        // Read and parse package.json
+        const packageJsonContent = await fs.readFile(packageJsonPath, 'utf-8');
+        const packageJson = JSON.parse(packageJsonContent);
+        return {
+            name: packageJson.name || 'unknown',
+            version: packageJson.version || '0.0.0',
+            description: packageJson.description || 'unknown',
+        };
+    }
+    catch (error) {
+        console.warn('Failed to read package.json:', error);
+        // Fallback values
+        return {
+            name: 'unknown',
+            version: '0.0.0',
+            description: 'unknown',
+        };
+    }
+}

package/dist/types.d.ts

@@ -1,24 +1,24 @@
 /**
  * Arguments passed to transform functions
  */
-export interface TransformArgs {
+export type TransformArgs = {
     /** The SVG content as a string */
     svg: string;
     /** The icon set (e.g., 'heroicons') */
     iconSet: string;
     /** The icon name (e.g., 'arrow-up-circle') */
     iconName: string;
-}
+};
 /**
  * SVG transformation function type
  */
-export type IconTransform = (args: TransformArgs) => Promise<string> | string;
+export type TransformFunction = (args: TransformArgs) => Promise<string> | string;
 /**
- * Configuration options for the Iconify CLI
+ * Configuration options for the add-icon CLI
  */
-export interface IconifyConfig {
+export type Config = {
     /** Directory to output icons */
     outputDir: string;
     /** Array of transform functions to apply to icons */
-    transforms?: IconTransform[];
-}
+    transforms?: TransformFunction[];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wkovacs64/add-icon",
-  "version": "0.1.0-dev.8f859e16",
+  "version": "0.1.0-dev.e2dd6945",
   "description": "CLI tool to download and transform icons from Iconify",
   "keywords": [
     "iconify",
@@ -18,10 +18,11 @@
     "./package.json": "./package.json"
   },
   "bin": {
-    "add-icon": "dist/index.js"
+    "add-icon": "bin/add-icon.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "bin"
   ],
   "scripts": {
     "build": "tsc",
@@ -44,7 +45,7 @@
   },
   "dependencies": {
     "commander": "^13.1.0",
-    "tsx": "^4.19.3",
+    "esbuild": "~0.25.2",
     "typescript": "^5.8.3"
   },
   "devDependencies": {
@@ -57,6 +58,7 @@
     "del-cli": "6.0.0",
     "eslint": "9.24.0",
     "npm-run-all2": "7.0.2",
-    "prettier": "3.5.3"
+    "prettier": "3.5.3",
+    "tsx": "4.19.3"
   }
 }