Add complete SVG sprite system with all variants

Payment sprites (16 files, 38 brands each): - Shapes: icon, square, rectangle, text-only - Modes: lm (light), dm (dark), la (light-accent), da (dark-accent) Social sprites (12 files, 11-12 brands each): - Shapes: icon, full-logo, text-only - Same 4 color modes Includes build-sprites.php to regenerate from source materials. Updated README with complete documentation. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-26 19:15:09 +00:00
parent 4b2a9f7138
commit 19a7fe06a8
32 changed files with 15145 additions and 323 deletions
--- a/build-sprites.php
+++ b/build-sprites.php
@@ -0,0 +1,114 @@
+<?php
+/**
+ * Build SVG sprites from individual icon files
+ * Run: php build-sprites.php
+ */
+
+$materialsDir = '/mnt/ssd/docker/ps178-mprexpresscheckout/materials/icons-v2';
+$outputDir = __DIR__ . '/sprites';
+
+// Mode mapping
+$modes = [
+    'light-mode' => 'lm',
+    'dark-mode' => 'dm',
+    'light-accent' => 'la',
+    'dark-accent' => 'da',
+];
+
+// Payment shapes
+$paymentShapes = ['icon', 'square', 'rectangle', 'text-only'];
+
+// Social shapes
+$socialShapes = ['icon', 'full-logo', 'text-only'];
+
+/**
+ * Build a sprite from a directory of SVG files
+ */
+function buildSprite(string $sourceDir, string $outputFile, string $modeSuffix): void
+{
+    if (!is_dir($sourceDir)) {
+        echo "  Skipping: $sourceDir (not found)\n";
+        return;
+    }
+
+    $files = glob($sourceDir . '/*.svg');
+    if (empty($files)) {
+        echo "  Skipping: $sourceDir (no SVG files)\n";
+        return;
+    }
+
+    $symbols = [];
+
+    foreach ($files as $file) {
+        $filename = basename($file, '.svg');
+        $content = file_get_contents($file);
+
+        // Extract viewBox from original SVG
+        preg_match('/viewBox="([^"]+)"/', $content, $viewBoxMatch);
+        $viewBox = $viewBoxMatch[1] ?? '0 0 45 45';
+
+        // Extract width/height if present
+        preg_match('/width="([^"]+)"/', $content, $widthMatch);
+        preg_match('/height="([^"]+)"/', $content, $heightMatch);
+        $width = $widthMatch[1] ?? null;
+        $height = $heightMatch[1] ?? null;
+
+        // Remove XML declaration and outer SVG tags
+        $content = preg_replace('/<\?xml[^>]+\?>/', '', $content);
+        $content = preg_replace('/<!--[^>]*-->/', '', $content);
+
+        // Extract inner content (everything between <svg> and </svg>)
+        if (preg_match('/<svg[^>]*>(.*)<\/svg>/s', $content, $match)) {
+            $innerContent = trim($match[1]);
+        } else {
+            echo "  Warning: Could not parse $filename\n";
+            continue;
+        }
+
+        // Clean up the inner content - remove defs with clip-paths that reference unique IDs
+        // and inline styles where possible
+        $innerContent = preg_replace('/<defs>.*?<\/defs>/s', '', $innerContent);
+        $innerContent = preg_replace('/clip-path="url\([^)]+\)"/', '', $innerContent);
+        $innerContent = preg_replace('/<clipPath[^>]*>.*?<\/clipPath>/s', '', $innerContent);
+        $innerContent = preg_replace('/<g[^>]*>\s*<\/g>/', '', $innerContent);
+
+        // Use filename as ID (already includes mode suffix like visa_lm)
+        $id = $filename;
+
+        $symbols[] = "  <symbol id=\"$id\" viewBox=\"$viewBox\">$innerContent</symbol>";
+    }
+
+    if (empty($symbols)) {
+        echo "  Skipping: $outputFile (no valid symbols)\n";
+        return;
+    }
+
+    $sprite = "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display:none\">\n";
+    $sprite .= implode("\n", $symbols) . "\n";
+    $sprite .= "</svg>\n";
+
+    file_put_contents($outputFile, $sprite);
+    echo "  Created: $outputFile (" . count($symbols) . " icons)\n";
+}
+
+// Build payment sprites
+echo "Building payment sprites...\n";
+foreach ($paymentShapes as $shape) {
+    foreach ($modes as $modeDir => $modeSuffix) {
+        $sourceDir = "$materialsDir/payment-icons/$shape/$modeDir";
+        $outputFile = "$outputDir/payments/$shape-$modeSuffix.svg";
+        buildSprite($sourceDir, $outputFile, $modeSuffix);
+    }
+}
+
+// Build social sprites
+echo "\nBuilding social sprites...\n";
+foreach ($socialShapes as $shape) {
+    foreach ($modes as $modeDir => $modeSuffix) {
+        $sourceDir = "$materialsDir/socials-icons/$shape/$modeDir";
+        $outputFile = "$outputDir/socials/$shape-$modeSuffix.svg";
+        buildSprite($sourceDir, $outputFile, $modeSuffix);
+    }
+}
+
+echo "\nDone!\n";