fix: fixed array length error in diff endpoint (#3498)

docs/.vitepress/api/gh-icon/[...data].get.ts

@@ -15,8 +15,10 @@ export default eventHandler((event) => {
 
   const src = Buffer.from(data, 'base64').toString('utf8').replaceAll('\n', '');
 
-  const width = parseInt((src.includes('svg') ? src.match(/width="(\d+)"/)?.[1] : null) ?? '24');
-  const height = parseInt((src.includes('svg') ? src.match(/height="(\d+)"/)?.[1] : null) ?? '24');
+  const width = parseInt((src.includes('<svg ') ? src.match(/width="(\d+)"/)?.[1] : null) ?? '24');
+  const height = parseInt(
+    (src.includes('<svg ') ? src.match(/height="(\d+)"/)?.[1] : null) ?? '24',
+  );
 
   const children = [];
 

docs/.vitepress/api/gh-icon/diff/[...data].get.ts

@@ -17,6 +17,13 @@ export default eventHandler((event) => {
     .replaceAll('\n', '')
     .replace(/<svg[^>]*>|<\/svg>/g, '');
 
+  const width = parseInt(
+    (newSrc.includes('<svg ') ? newSrc.match(/width="(\d+)"/)?.[1] : null) ?? '24',
+  );
+  const height = parseInt(
+    (newSrc.includes('<svg ') ? newSrc.match(/height="(\d+)"/)?.[1] : null) ?? '24',
+  );
+
   const children = [];
 
   const oldSrc = iconNodes[name]
@@ -27,7 +34,9 @@ export default eventHandler((event) => {
 
   const svg = Buffer.from(
     // We can't use jsx here, is not supported here by nitro.
-    renderToString(createElement(Diff, { oldSrc, newSrc, showGrid: true }, children)),
+    renderToString(
+      createElement(Diff, { oldSrc, newSrc, showGrid: true, height, width }, children),
+    ),
   ).toString('utf8');
 
   defaultContentType(event, 'image/svg+xml');

docs/.vitepress/lib/SvgPreview/Backdrop.tsx

@@ -53,8 +53,8 @@ const Backdrop = ({
         <rect
           x="0"
           y="0"
-          width="24"
-          height="24"
+          width="100%"
+          height="100%"
           fill="#fff"
           stroke="none"
         />
@@ -67,8 +67,8 @@ const Backdrop = ({
         <rect
           x="0"
           y="0"
-          width="24"
-          height="24"
+          width="100%"
+          height="100%"
           opacity={0.5}
           fill={`url(#pattern-${id})`}
           stroke="none"

docs/.vitepress/lib/SvgPreview/Diff.tsx

@@ -7,15 +7,17 @@ const SvgPreview = React.forwardRef<
   {
     oldSrc: string;
     newSrc: string;
+    height: number;
+    width: number;
   } & React.SVGProps<SVGSVGElement>
->(({ oldSrc, newSrc, children, ...props }, ref) => {
+>(({ oldSrc, newSrc, children, height, width, ...props }, ref) => {
   return (
     <svg
       ref={ref}
       xmlns="http://www.w3.org/2000/svg"
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
       fill="none"
       stroke="currentColor"
       strokeWidth={2}
@@ -25,6 +27,8 @@ const SvgPreview = React.forwardRef<
     >
       <style>{darkModeCss}</style>
       <Grid
+        width={width}
+        height={height}
         strokeWidth={0.1}
         stroke="#777"
         strokeOpacity={0.3}
@@ -37,8 +41,8 @@ const SvgPreview = React.forwardRef<
         <rect
           x="0"
           y="0"
-          width="24"
-          height="24"
+          width="100%"
+          height="100%"
           fill="#000"
           stroke="none"
         />