fix(pdf): render truck as vector, fix back logo coloring

scripts/svg-to-react-pdf.ts

@@ -0,0 +1,64 @@
+import fs from 'fs';
+
+const svgFile = process.argv[2];
+const outFile = process.argv[3];
+
+let content = fs.readFileSync(svgFile, 'utf8');
+
+content = content.replace(/<\?xml.*\?>/g, '');
+content = content.replace(/<!DOCTYPE.*>/g, '');
+content = content.replace(/xmlns:xlink="[^"]+"/g, '');
+content = content.replace(/xmlns:serif="[^"]+"/g, '');
+content = content.replace(/xml:space="preserve"/g, '');
+content = content.replace(/xmlns="[^"]+"/g, '');
+content = content.replace(/version="[^"]+"/g, '');
+
+// Convert attributes to camelCase
+content = content.replace(/fill-rule/g, 'fillRule');
+content = content.replace(/clip-rule/g, 'clipRule');
+content = content.replace(/stroke-linejoin/g, 'strokeLinejoin');
+content = content.replace(/stroke-miterlimit/g, 'strokeMiterlimit');
+
+// Convert style="fill:#xxxx;fill-rule:nonzero;" to fill="#xxxx" fillRule="nonzero"
+content = content.replace(/style="([^"]+)"/g, (match, styleStr) => {
+  const parts = styleStr.split(';').filter(Boolean);
+  let attrs = [];
+  for (const part of parts) {
+    const [key, val] = part.split(':');
+    if (key === 'fill') attrs.push(`fill="${val}"`);
+    if (key === 'fillRule' || key === 'fill-rule') attrs.push(`fillRule="${val}"`);
+    if (key === 'clipRule' || key === 'clip-rule') attrs.push(`clipRule="${val}"`);
+    if (key === 'strokeLinejoin' || key === 'stroke-linejoin')
+      attrs.push(`strokeLinejoin="${val}"`);
+    if (key === 'strokeMiterlimit' || key === 'stroke-miterlimit')
+      attrs.push(`strokeMiterlimit="${val}"`);
+  }
+  return attrs.join(' ');
+});
+
+// React components
+content = content.replace(/<svg/g, '<Svg');
+content = content.replace(/<\/svg>/g, '</Svg>');
+content = content.replace(/<g/g, '<G');
+content = content.replace(/<\/g>/g, '</G>');
+content = content.replace(/<path/g, '<Path');
+content = content.replace(/<\/path>/g, '</Path>');
+
+// In React PDF, width/height on Svg can be removed and controlled via style.
+content = content.replace(/width="100%" height="100%" /, '');
+
+const final = `
+import React from 'react';
+import { Svg, G, Path } from '@react-pdf/renderer';
+
+export const TruckBlueprint = ({ style, opacity = 1 }: { style?: any, opacity?: number }) => (
+  <Svg viewBox="0 0 1615 974" style={[style, { opacity }]}>
+    <G fillRule="evenodd" clipRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2">
+      ${content.match(/<G[\s\S]*<\/G>/)?.[0] || content}
+    </G>
+  </Svg>
+);
+`;
+
+fs.writeFileSync(outFile, final);
+console.log('Done!');