@wkovacs64/add-icon 0.1.0-dev.8525808f

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Justin R. Hall
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,183 @@
+# @wkovacs64/add-icon
+
+A command-line tool to download icons from the [Iconify Framework](https://iconify.design/) and
+apply custom transformations.
+
+## Installation
+
+Add it to your project:
+
+```bash
+npm install @wkovacs64/add-icon
+```
+
+Or use it directly with npx without installing:
+
+```bash
+npx @wkovacs64/add-icon heroicons:arrow-up-circle
+```
+
+## Usage
+
+### Basic Usage
+
+Download an icon:
+
+```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
+```
+
+### 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}`);
+}
+```
+
+#### TypeScript Transform
+
+Create a custom transform file (e.g., `my-transform.ts`):
+
+```ts
+import type { TransformArgs } from '@wkovacs64/add-icon';
+
+/**
+ * Custom transform to add a title element to SVG
+ * @param args - Transform arguments containing SVG content and icon information
+ * @returns The transformed SVG
+ */
+export default function addTitle(args: TransformArgs): string {
+  const titleElement = `<title>${args.iconSet}:${args.iconName}</title>`;
+  return args.svg.replace(/<svg([^>]*)>/, `<svg$1>${titleElement}`);
+}
+```
+
+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
+
+You can create a configuration file (`add-icon.config.js`) in your project root:
+
+```js
+import { transforms } from '@wkovacs64/add-icon';
+
+// Define custom transform
+function addCustomAttribute(args) {
+  return args.svg.replace(/<svg/, `<svg data-icon="${args.iconName}"`);
+}
+
+export default {
+  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),
+    );
+  }
+}
+
+downloadCustomIcon();
+```
+
+## License
+
+MIT

package/dist/config.d.ts

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

package/dist/config.js

@@ -0,0 +1,30 @@
+import fs from 'node:fs';
+import path from 'node:path';
+/**
+ * Default configuration
+ */
+export const defaultConfig = {
+    outputDir: './icons',
+};
+/**
+ * Loads configuration from file if it exists
+ * @param configPath - Path to config file
+ * @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);
+            return { ...defaultConfig, ...config.default };
+        }
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        console.error(`Error loading config file: ${errorMessage}`);
+    }
+    return defaultConfig;
+}

package/dist/iconify.d.ts

@@ -0,0 +1,17 @@
+import type { IconifyConfig } from './types.js';
+/**
+ * Parses an icon reference into iconSet and iconName
+ * @param iconReference - Reference in format 'iconSet:iconName'
+ * @returns Object with iconSet and iconName
+ */
+export declare function parseIconReference(iconReference: string): {
+    iconSet: string;
+    iconName: string;
+};
+/**
+ * Downloads an icon and applies transforms
+ * @param iconReference - Icon reference (e.g., 'heroicons:arrow-up-circle')
+ * @param config - Configuration options
+ * @returns Path to saved icon file
+ */
+export declare function downloadIcon(iconReference: string, config: IconifyConfig): Promise<string>;

package/dist/iconify.js

@@ -0,0 +1,88 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { iconToSVG } from '@iconify/utils';
+/**
+ * Parses an icon reference into iconSet and iconName
+ * @param iconReference - Reference in format 'iconSet:iconName'
+ * @returns Object with iconSet and iconName
+ */
+export function parseIconReference(iconReference) {
+    const parts = iconReference.split(':');
+    if (parts.length !== 2 || !parts[0] || !parts[1]) {
+        throw new Error(`Invalid icon reference: ${iconReference}. Expected format: iconSet:iconName`);
+    }
+    return {
+        iconSet: parts[0],
+        iconName: parts[1],
+    };
+}
+/**
+ * Fetches icon data from Iconify API
+ * @param iconSet - Icon set name
+ * @param iconName - Icon name
+ * @returns Promise with icon data
+ */
+async function fetchIconData(iconSet, iconName) {
+    const apiUrl = `https://api.iconify.design/${iconSet}.json?icons=${iconName}`;
+    try {
+        const response = await fetch(apiUrl);
+        if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        const data = await response.json();
+        if (!data || !data.icons || !data.icons[iconName]) {
+            throw new Error(`Icon '${iconName}' not found in '${iconSet}' icon set`);
+        }
+        return data.icons[iconName];
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        throw new Error(`Failed to fetch icon data: ${errorMessage}`);
+    }
+}
+/**
+ * Downloads an icon and applies transforms
+ * @param iconReference - Icon reference (e.g., 'heroicons:arrow-up-circle')
+ * @param config - Configuration options
+ * @returns Path to saved icon file
+ */
+export async function downloadIcon(iconReference, config) {
+    try {
+        const { iconSet, iconName } = parseIconReference(iconReference);
+        // Ensure the output directory exists
+        if (!fs.existsSync(config.outputDir)) {
+            fs.mkdirSync(config.outputDir, { recursive: true });
+        }
+        // Load the icon data
+        const iconData = await fetchIconData(iconSet, iconName);
+        // Convert icon data to SVG
+        const renderData = iconToSVG(iconData, {
+            height: 'auto',
+        });
+        // Create SVG string
+        let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${renderData.attributes.width}" height="${renderData.attributes.height}" viewBox="${renderData.attributes.viewBox}">${renderData.body}</svg>`;
+        // Apply transforms if specified
+        if (config.transforms && config.transforms.length > 0) {
+            for (const transform of config.transforms) {
+                // Create transform arguments object
+                const transformArgs = {
+                    svg,
+                    iconSet,
+                    iconName,
+                };
+                // Apply transform
+                svg = await Promise.resolve(transform(transformArgs));
+            }
+        }
+        // Create file name
+        const fileName = `${iconSet}-${iconName}.svg`;
+        const filePath = path.join(config.outputDir, fileName);
+        // Write the SVG file
+        fs.writeFileSync(filePath, svg, 'utf8');
+        return filePath;
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        throw new Error(`Failed to download icon: ${errorMessage}`);
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+import type { IconTransform, TransformArgs } from './types.js';
+import * as defaultTransforms from './transforms.js';
+export type { IconTransform, TransformArgs };
+export { defaultTransforms as transforms };
+export { downloadIcon, parseIconReference } from './iconify.js';

package/dist/index.js

@@ -0,0 +1,115 @@
+#!/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 * as defaultTransforms from './transforms.js';
+// Re-export transforms for easy importing by users
+export { defaultTransforms as transforms };
+// Re-export other useful functions
+export { downloadIcon, parseIconReference } from './iconify.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('--remove-size', 'Remove width and height attributes')
+    .option('--optimize', 'Optimize SVG with SVGO')
+    .option('--minify', 'Minify SVG by removing whitespace')
+    .option('-t, --transform <path>', 'Path to custom transform module (.js or .ts)')
+    .action(async (icon, options) => {
+    try {
+        // Load config (first from config file, then override with CLI options)
+        const config = await loadConfig(options.config);
+        // Override output directory if specified in CLI
+        if (options.outputDir) {
+            config.outputDir = options.outputDir;
+        }
+        // Prepare transforms array
+        const transforms = [];
+        // Add requested built-in transforms
+        if (options.removeSize) {
+            transforms.push(defaultTransforms.removeSize);
+        }
+        if (options.optimize) {
+            transforms.push(defaultTransforms.optimizeSvg);
+        }
+        if (options.minify) {
+            transforms.push(defaultTransforms.minifySvg);
+        }
+        // Load custom transform if specified
+        if (options.transform) {
+            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);
+                    }
+                }
+                else {
+                    // For JavaScript files, use dynamic import
+                    customTransform = await import(`file://${transformPath}`);
+                }
+                if (customTransform && typeof customTransform.default === 'function') {
+                    transforms.push(customTransform.default);
+                }
+                else {
+                    console.error('Custom transform must export a default function');
+                    process.exit(1);
+                }
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                console.error(`Failed to load custom transform: ${errorMessage}`);
+                process.exit(1);
+            }
+        }
+        // Add transforms to config
+        if (transforms.length > 0) {
+            config.transforms = transforms;
+        }
+        // Download the icon
+        console.log(`Downloading icon: ${icon}...`);
+        const savedPath = await downloadIcon(icon, config);
+        console.log(`✓ Icon saved to: ${savedPath}`);
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        console.error(`Error: ${errorMessage}`);
+        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();
+}

package/dist/transforms.d.ts

@@ -0,0 +1,13 @@
+import type { IconTransform } from './types.js';
+/**
+ * Removes width and height attributes from SVG
+ */
+export declare const removeSize: IconTransform;
+/**
+ * Optimizes SVG with SVGO
+ */
+export declare const optimizeSvg: IconTransform;
+/**
+ * Minifies SVG by removing whitespace
+ */
+export declare const minifySvg: IconTransform;

package/dist/transforms.js

@@ -0,0 +1,37 @@
+import { optimize } from 'svgo';
+/**
+ * Removes width and height attributes from SVG
+ */
+export const removeSize = (args) => {
+    const { svg } = args;
+    return svg.replace(/\s+width="[^"]+"/g, '').replace(/\s+height="[^"]+"/g, '');
+};
+/**
+ * Optimizes SVG with SVGO
+ */
+export const optimizeSvg = (args) => {
+    const { svg } = args;
+    const result = optimize(svg, {
+        plugins: [
+            'preset-default',
+            'removeXMLNS',
+            {
+                name: 'removeAttrs',
+                params: {
+                    attrs: '(data-name)',
+                },
+            },
+        ],
+    });
+    return result.data;
+};
+/**
+ * Minifies SVG by removing whitespace
+ */
+export const minifySvg = (args) => {
+    const { svg } = args;
+    return svg
+        .replace(/>[\s\r\n]+</g, '><') // Remove whitespace between tags
+        .replace(/\s{2,}/g, ' ') // Reduce multiple spaces to single space
+        .trim();
+};

package/dist/types.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Arguments passed to transform functions
+ */
+export interface 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;
+/**
+ * Configuration options for the Iconify CLI
+ */
+export interface IconifyConfig {
+    /** Directory to output icons */
+    outputDir: string;
+    /** Array of transform functions to apply to icons */
+    transforms?: IconTransform[];
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@wkovacs64/add-icon",
+  "version": "0.1.0-dev.8525808f",
+  "description": "CLI tool to download and transform icons from Iconify",
+  "keywords": [
+    "iconify",
+    "icons",
+    "svg",
+    "cli",
+    "download"
+  ],
+  "author": "Justin R. Hall <justin.r.hall@gmail.com>",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "add-icon": "dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "clean": "del-cli dist",
+    "prebuild": "npm run --silent clean",
+    "prepublishOnly": "run-p --silent lint typecheck build",
+    "start": "node dist/index.js",
+    "dev": "tsx src/index.ts",
+    "typecheck": "attw --pack --profile esm-only",
+    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
+    "format": "prettier --cache --write .",
+    "format:check": "prettier --cache --check .",
+    "changeset": "changeset",
+    "changeset:version": "changeset version && npm install --package-lock-only",
+    "changeset:publish": "changeset publish"
+  },
+  "prettier": "@wkovacs64/prettier-config",
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "dependencies": {
+    "@iconify/utils": "^2.3.0",
+    "commander": "^13.1.0",
+    "svgo": "^3.3.2",
+    "tsx": "^4.19.3",
+    "typescript": "^5.8.3"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "0.17.4",
+    "@changesets/changelog-github": "0.5.1",
+    "@changesets/cli": "2.29.0",
+    "@types/node": "22.14.1",
+    "@wkovacs64/eslint-config": "7.5.2",
+    "@wkovacs64/prettier-config": "4.1.1",
+    "del-cli": "6.0.0",
+    "eslint": "9.24.0",
+    "npm-run-all2": "7.0.2",
+    "prettier": "3.5.3"
+  }
+}