@sankhyalabs/ez-design 7.0.2 → 7.1.0-dev.4

package/scripts/iconsOptimizer.js

@@ -0,0 +1,189 @@
+'use strict';
+
+/**
+ * iconsOptimizer.js
+ *
+ * Transforms the source SVG sprite for production delivery:
+ *
+ *  1. Replaces all hardcoded brand fill/stroke colors with `currentColor`
+ *     so icon color is controlled purely via CSS `color:` property.
+ *  2. Removes redundant `xmlns`/`xmlns:xlink` from every <symbol> element
+ *     (those attributes are only valid on the root <svg>), saving ~88 KB.
+ *  3. Writes the optimised sprite to dist/default/icons/ez-sprite.svg
+ *  4. Splits the sprite into individual optimised SVG files
+ *     → dist/default/icons/svg/<name>.svg  (used by the CSS-mask approach
+ *     and by fontsGenerator.js for icon-font generation).
+ *  5. SVGO-optimises each individual SVG to minimise file size.
+ *  6. Copies any other SVGs that live alongside the sprite unchanged.
+ */
+
+const fs   = require('fs');
+const path = require('path');
+
+// ---------------------------------------------------------------------------
+// Paths (resolved relative to the repository root)
+// ---------------------------------------------------------------------------
+const SPRITE_SRC  = path.resolve('./src/default/icons/svg/actions-sprite.svg');
+const SPRITE_NAME = 'actions-sprite.svg';
+const SPRITE_DIST = path.resolve('./dist/default/icons/ez-sprite.svg');
+const SVG_DIST    = path.resolve('./dist/default/icons/svg');
+const SVG_SRC_DIR = path.resolve('./src/default/icons/svg');
+
+// ---------------------------------------------------------------------------
+// Brand colors that must become currentColor (case-insensitive)
+// #2B3A54 = petroleum-600  (primary icon colour, 188 occurrences)
+// #383C45 = near-petroleum (7 occurrences)
+// ---------------------------------------------------------------------------
+const HARDCODED_COLORS = [/#2B3A54/gi, /#383C45/gi];
+
+// ---------------------------------------------------------------------------
+// Core optimisation helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Applies all structural and semantic optimisations to raw SVG content:
+ * - Replaces hardcoded brand colours with `currentColor`.
+ * - Strips redundant xmlns declarations from <symbol> elements.
+ */
+function optimiseSvgContent(content) {
+  let result = content;
+
+  // Replace brand palette colours with currentColor (fill + stroke)
+  for (const pattern of HARDCODED_COLORS) {
+    result = result.replace(pattern, 'currentColor');
+  }
+
+  // Remove xmlns="..." from <symbol> elements (only valid on root <svg>)
+  result = result.replace(
+    /(<symbol\b[^>]*?) xmlns="http:\/\/www\.w3\.org\/2000\/svg"/g,
+    '$1'
+  );
+
+  // Remove xmlns:xlink="..." from <symbol> elements
+  result = result.replace(
+    /(<symbol\b[^>]*?) xmlns:xlink="http:\/\/www\.w3\.org\/1999\/xlink"/g,
+    '$1'
+  );
+
+  return result;
+}
+
+/**
+ * Parses every <symbol> in the sprite and returns an array of objects:
+ * { id, viewBox, innerContent }
+ */
+function parseSymbols(content) {
+  const symbols = [];
+  // Match each <symbol ...>...</symbol> block
+  const symbolRe = /<symbol([^>]*)>([\s\S]*?)<\/symbol>/g;
+  let match;
+
+  while ((match = symbolRe.exec(content)) !== null) {
+    const attrs    = match[1];
+    const inner    = match[2];
+    const idMatch  = /\bid="([^"]+)"/.exec(attrs);
+    const vbMatch  = /viewBox="([^"]+)"/.exec(attrs);
+
+    if (!idMatch) continue;
+
+    // Normalise ID: strip "Icons=" prefix, lowercase, keep everything else
+    const id      = idMatch[1].replace(/^Icons=/i, '').toLowerCase();
+    const viewBox = vbMatch ? vbMatch[1] : '0 0 24 24';
+
+    symbols.push({ id, viewBox, inner });
+  }
+
+  return symbols;
+}
+
+/**
+ * Wraps extracted <symbol> inner content into a self-contained SVG document.
+ */
+function wrapAsSvg(inner, viewBox) {
+  return (
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}">` +
+    inner.trim() +
+    `</svg>\n`
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Optional SVGO pass on individual SVG files
+// ---------------------------------------------------------------------------
+let svgoOptimise = null;
+
+try {
+  // Try SVGO v2 (CommonJS-compatible) first
+  const { optimize } = require('svgo');
+  const svgoConfig = {
+    plugins: [
+      {
+        name: 'preset-default',
+        params: {
+          overrides: {
+            // Must keep viewBox — icons would lose their dimensions without it
+            removeViewBox: false,
+            // Do NOT mess with currentColor we just injected
+            removeUselessStrokeAndFill: false,
+            convertColors: false,
+            // Keep IDs clean for potential <use> references
+            cleanupIds: { remove: false, minify: false },
+          },
+        },
+      },
+    ],
+  };
+
+  svgoOptimise = (svgString) => optimize(svgString, svgoConfig).data;
+  console.log('[iconsOptimizer] SVGO available — individual SVGs will be optimised.');
+} catch {
+  console.warn('[iconsOptimizer] SVGO not found — individual SVGs will be written without path optimisation.');
+  console.warn('                 Run: npm install --save-dev svgo@2 to enable it.');
+}
+
+// ---------------------------------------------------------------------------
+// Main
+// ---------------------------------------------------------------------------
+function run() {
+  console.log('[iconsOptimizer] Reading source sprite…');
+  const rawContent = fs.readFileSync(SPRITE_SRC, 'utf8');
+
+  // 1 ── Optimise the sprite
+  console.log('[iconsOptimizer] Applying colour and namespace optimisations…');
+  const optimisedSprite = optimiseSvgContent(rawContent);
+
+  // 2 ── Write optimised sprite
+  fs.mkdirSync(path.dirname(SPRITE_DIST), { recursive: true });
+  fs.writeFileSync(SPRITE_DIST, optimisedSprite, 'utf8');
+  const originalKb  = (Buffer.byteLength(rawContent,      'utf8') / 1024).toFixed(1);
+  const optimisedKb = (Buffer.byteLength(optimisedSprite, 'utf8') / 1024).toFixed(1);
+  console.log(`[iconsOptimizer] Sprite written → ${SPRITE_DIST}`);
+  console.log(`                 ${originalKb} KB → ${optimisedKb} KB`);
+
+  // 3 ── Split into individual SVG files
+  fs.mkdirSync(SVG_DIST, { recursive: true });
+  const symbols = parseSymbols(optimisedSprite);
+
+  let written = 0;
+  for (const { id, viewBox, inner } of symbols) {
+    let svgContent = wrapAsSvg(inner, viewBox);
+    if (svgoOptimise) svgContent = svgoOptimise(svgContent);
+    fs.writeFileSync(path.join(SVG_DIST, `${id}.svg`), svgContent, 'utf8');
+    written++;
+  }
+  console.log(`[iconsOptimizer] ${written} individual SVGs written → ${SVG_DIST}`);
+
+  // 4 ── Copy any other SVG files that live alongside the sprite (unchanged)
+  const otherFiles = fs.readdirSync(SVG_SRC_DIR).filter(
+    (f) => f.toLowerCase().endsWith('.svg') && f !== SPRITE_NAME
+  );
+  for (const file of otherFiles) {
+    const dest = path.join(SVG_DIST, file.replace(/^Icons=/i, '').toLowerCase());
+    fs.copyFileSync(path.join(SVG_SRC_DIR, file), dest);
+  }
+  if (otherFiles.length) {
+    console.log(`[iconsOptimizer] ${otherFiles.length} additional SVG(s) copied.`);
+  }
+}
+
+run();