@cocoar/icons-cli 0.1.0-beta.34

package/bin/cocoar-icons.mjs

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+
+/**
+ * @cocoar/icons-cli
+ *
+ * Tools for preparing SVG icons for use with @cocoar/vue-ui.
+ * Works with any directory of SVG files (Lucide, custom icons, etc.).
+ *
+ * Commands:
+ *   normalize  Validate, normalize SVGs and generate a manifest
+ *   bundle     Generate a TypeScript icon map from SVGs
+ */
+
+import { normalize } from '../lib/normalize.mjs';
+import { bundle } from '../lib/bundle.mjs';
+
+const USAGE = `
+Usage: cocoar-icons <command> [options]
+
+Commands:
+  normalize  --from <dir> --output <dir>                          Validate, normalize SVGs and generate manifest
+  bundle     --from <dir> [--icons <name1,...>] --output <file>    Generate a TypeScript icon map
+
+Examples:
+  cocoar-icons normalize --from ./my-svgs --output ./public/icons
+  cocoar-icons bundle --from ./my-svgs --output ./src/my-icons.ts
+  cocoar-icons bundle --from ./node_modules/lucide-static/icons --icons "calendar,star" --output ./src/extra-icons.ts
+`.trim();
+
+const command = process.argv[2];
+
+switch (command) {
+  case 'normalize':
+    normalize(process.argv.slice(3));
+    break;
+  case 'bundle':
+    bundle(process.argv.slice(3));
+    break;
+  default:
+    console.error(USAGE);
+    process.exit(command ? 1 : 0);
+}

package/lib/bundle.mjs

@@ -0,0 +1,127 @@
+/**
+ * Bundle SVG Icons
+ *
+ * Generates a TypeScript icon map from SVG files in a directory.
+ * The output file can be registered as an additional CoarIconMapSource.
+ * Works with any SVG source (Lucide, custom icons, etc.).
+ */
+
+import { readdir, readFile, writeFile } from 'fs/promises';
+import { join, parse, resolve } from 'path';
+import { normalizeSvg, validateSvg, escapeSvgForJs } from './svg-utils.mjs';
+
+function parseArgs(args) {
+  let from = null;
+  let icons = null;
+  let output = null;
+
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === '--from' && i + 1 < args.length) {
+      from = args[i + 1];
+    } else if (args[i] === '--icons' && i + 1 < args.length) {
+      icons = args[i + 1];
+    } else if (args[i] === '--output' && i + 1 < args.length) {
+      output = args[i + 1];
+    }
+  }
+
+  return { from, icons, output };
+}
+
+export async function bundle(args) {
+  const { from: fromArg, icons: iconsArg, output: outputArg } = parseArgs(args);
+
+  if (!fromArg || !outputArg) {
+    console.error(
+      'Usage: cocoar-icons bundle --from <svg-directory> [--icons <name1,name2,...>] --output <file.ts>',
+    );
+    console.error('');
+    console.error('Examples:');
+    console.error(
+      '  cocoar-icons bundle --from ./my-svgs --output ./src/my-icons.ts',
+    );
+    console.error(
+      '  cocoar-icons bundle --from ./node_modules/lucide-static/icons --icons "calendar,star" --output ./src/extra-icons.ts',
+    );
+    process.exit(1);
+  }
+
+  const sourceDir = resolve(process.cwd(), fromArg);
+  const outputFile = resolve(process.cwd(), outputArg);
+
+  // Determine which icons to include
+  let iconNames;
+  if (iconsArg) {
+    iconNames = iconsArg
+      .split(',')
+      .map((n) => n.trim())
+      .filter(Boolean);
+    if (iconNames.length === 0) {
+      console.error('❌ No icon names provided');
+      process.exit(1);
+    }
+  } else {
+    // No --icons filter: bundle all SVGs in the directory
+    const files = await readdir(sourceDir);
+    iconNames = files
+      .filter((f) => f.endsWith('.svg'))
+      .map((f) => parse(f).name)
+      .sort();
+    if (iconNames.length === 0) {
+      console.error(`❌ No SVG files found in ${sourceDir}`);
+      process.exit(1);
+    }
+  }
+
+  console.warn('📦 Bundling icons...');
+  console.warn(`📂 Source: ${sourceDir}`);
+  console.warn(`📋 Icons: ${iconNames.length}`);
+  console.warn(`📝 Output: ${outputFile}`);
+
+  const iconEntries = [];
+  const notFound = [];
+
+  for (const name of iconNames) {
+    let content;
+    try {
+      content = await readFile(join(sourceDir, `${name}.svg`), 'utf-8');
+    } catch {
+      notFound.push(name);
+      continue;
+    }
+
+    validateSvg(content, `${name}.svg`);
+    const normalized = normalizeSvg(content);
+    const escaped = escapeSvgForJs(normalized);
+
+    iconEntries.push(`  '${name}': \`${escaped}\`,`);
+    console.warn(`  ✓ ${name}`);
+  }
+
+  if (notFound.length > 0) {
+    console.error(`❌ Icons not found: ${notFound.join(', ')}`);
+    process.exit(1);
+  }
+
+  const output = `/**
+ * Icon bundle.
+ *
+ * ⚠️  DO NOT EDIT THIS FILE MANUALLY
+ *
+ * Auto-generated by: cocoar-icons bundle
+ * Source: ${fromArg}
+ * Icons: ${iconEntries.length}
+ *
+ * To regenerate:
+ *   npx @cocoar/icons bundle --from "${fromArg}"${iconsArg ? ` --icons "${iconNames.join(',')}"` : ''} --output ${outputArg}
+ */
+
+export const CUSTOM_ICONS: Record<string, string> = {
+${iconEntries.join('\n')}
+};
+`;
+
+  await writeFile(outputFile, output, 'utf-8');
+
+  console.warn(`✅ Generated ${outputFile} with ${iconEntries.length} icons`);
+}

package/lib/normalize.mjs

@@ -0,0 +1,93 @@
+/**
+ * Normalize SVG Icons
+ *
+ * Validates and normalizes SVG icons from a source directory,
+ * writes cleaned SVGs to an output directory, and generates
+ * a _manifest.json with all icon names.
+ *
+ * Useful for preparing icons for HTTP serving with CoarHttpIconSource.
+ */
+
+import { readdir, readFile, mkdir, writeFile } from 'fs/promises';
+import { join, parse, resolve } from 'path';
+import { normalizeSvg, validateSvg } from './svg-utils.mjs';
+
+function parseArgs(args) {
+  let from = null;
+  let output = null;
+
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === '--from' && i + 1 < args.length) {
+      from = args[i + 1];
+    } else if (args[i] === '--output' && i + 1 < args.length) {
+      output = args[i + 1];
+    }
+  }
+
+  return { from, output };
+}
+
+export async function normalize(args) {
+  const { from: fromArg, output: outputArg } = parseArgs(args);
+
+  if (!fromArg || !outputArg) {
+    console.error('Usage: cocoar-icons normalize --from <svg-directory> --output <directory>');
+    console.error('');
+    console.error('Examples:');
+    console.error('  cocoar-icons normalize --from ./my-svgs --output ./public/icons');
+    console.error('  cocoar-icons normalize --from ./node_modules/lucide-static/icons --output ./public/icons/lucide');
+    process.exit(1);
+  }
+
+  const sourceDir = resolve(process.cwd(), fromArg);
+  const outputDir = resolve(process.cwd(), outputArg);
+
+  console.warn('📦 Normalizing icons...');
+  console.warn(`📂 Source: ${sourceDir}`);
+  console.warn(`📝 Output: ${outputDir}`);
+
+  const files = await readdir(sourceDir);
+  const svgFiles = files.filter((f) => f.endsWith('.svg')).sort();
+
+  if (svgFiles.length === 0) {
+    console.error(`❌ No SVG files found in ${sourceDir}`);
+    process.exit(1);
+  }
+
+  console.warn(`📁 Found ${svgFiles.length} SVG icons`);
+
+  await mkdir(outputDir, { recursive: true });
+
+  let copied = 0;
+  let skipped = 0;
+  const copiedNames = [];
+
+  for (const file of svgFiles) {
+    const content = await readFile(join(sourceDir, file), 'utf-8');
+
+    try {
+      validateSvg(content, file);
+    } catch {
+      console.warn(`  ⚠️  Skipped ${file} (failed validation)`);
+      skipped++;
+      continue;
+    }
+
+    const normalized = normalizeSvg(content);
+    await writeFile(join(outputDir, file), normalized, 'utf-8');
+    copiedNames.push(parse(file).name);
+    copied++;
+  }
+
+  console.warn(`✅ Copied ${copied} icons to ${outputDir}`);
+  if (skipped > 0) {
+    console.warn(`⚠️  Skipped ${skipped} icons (failed validation)`);
+  }
+
+  await writeFile(
+    join(outputDir, '_manifest.json'),
+    JSON.stringify(copiedNames, null, 2),
+    'utf-8',
+  );
+  console.warn(`📋 Wrote _manifest.json with ${copiedNames.length} icon names`);
+}

package/lib/svg-utils.mjs

@@ -0,0 +1,52 @@
+/**
+ * SVG Utilities for icon processing.
+ */
+
+/**
+ * Normalize SVG content for production use:
+ * - Remove XML declaration
+ * - Remove comments
+ * - Trim whitespace
+ * - Minify (remove newlines between tags)
+ */
+export function normalizeSvg(svg) {
+  return svg
+    .replace(/<\?xml[^>]*\?>/g, '')
+    .replace(/<!--[\s\S]*?-->/g, '')
+    .trim()
+    .replace(/>\s+</g, '><')
+    .replace(/\s+/g, ' ');
+}
+
+/**
+ * Validate SVG content for security issues.
+ *
+ * @param {string} svg - SVG content to validate
+ * @param {string} filename - Filename for error messages
+ * @throws {Error} If dangerous content found
+ */
+export function validateSvg(svg, filename) {
+  const dangerous = [
+    { pattern: /<script/i, name: 'script tags' },
+    { pattern: /on\w+=/i, name: 'event handlers' },
+    { pattern: /<foreignObject/i, name: 'foreignObject' },
+    { pattern: /@import/i, name: 'CSS imports' },
+    { pattern: /javascript:/i, name: 'javascript: URIs' },
+  ];
+
+  for (const { pattern, name } of dangerous) {
+    if (pattern.test(svg)) {
+      throw new Error(`Dangerous content found in ${filename}: ${name}`);
+    }
+  }
+}
+
+/**
+ * Escape SVG content for use in JavaScript template literals.
+ */
+export function escapeSvgForJs(svg) {
+  return svg
+    .replace(/\\/g, '\\\\')
+    .replace(/`/g, '\\`')
+    .replace(/\$/g, '\\$');
+}

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@cocoar/icons-cli",
+  "version": "0.1.0-beta.34",
+  "type": "module",
+  "description": "CLI tools for managing SVG icons with @cocoar/vue-ui",
+  "license": "Apache-2.0",
+  "bin": {
+    "cocoar-icons": "./bin/cocoar-icons.mjs"
+  },
+  "files": [
+    "bin",
+    "lib"
+  ]
+}