myprestarocks
19a7fe06a8
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>
115 lines
3.6 KiB
PHP
115 lines
3.6 KiB
PHP
<?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";
|