From 1c5072c9c0491a0a0e876d01a500d1ba00dfd585 Mon Sep 17 00:00:00 2001
From: Nicolas Bachschmidt <nicolas@mobinergy.com>
Date: Tue, 20 Feb 2024 16:30:58 +0100
Subject: [PATCH] Also flatten rectangles with rounded corners

Add a custom plugin to convert rectangles with rounded corners to paths. Hopefully, this may be removed when svg/svgo#1963 or another similar PR is merged in SVGO.
---
 .../__snapshots__/lucide-preact.spec.tsx.snap |  27 +---
 .../lucide-react-native.spec.tsx.snap         | 126 ++----------------
 .../__snapshots__/lucide-react.spec.tsx.snap  |  27 +---
 .../__snapshots__/lucide-solid.spec.tsx.snap  |  36 +----
 .../tests/__snapshots__/lucide.spec.js.snap   |   9 +-
 scripts/render/processSvg.mjs                 |  58 +++++++-
 6 files changed, 79 insertions(+), 204 deletions(-)

diff --git a/packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.tsx.snap b/packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.tsx.snap
index e831f78e8e3..0647c415004 100644
--- a/packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.tsx.snap
+++ b/packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.tsx.snap
@@ -12,14 +12,7 @@ exports[`Using lucide icon components > should adjust the size, stroke color and
      stroke-linejoin="round"
      class="lucide lucide-grid3x3"
 >
-  <rect width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-  >
-  </rect>
-  <path d="M3 9h18M3 15h18M9 3v18M15 3v18">
+  <path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18">
   </path>
 </svg>
 `;
@@ -36,14 +29,7 @@ exports[`Using lucide icon components > should not scale the strokeWidth when ab
      stroke-linejoin="round"
      class="lucide lucide-grid3x3"
 >
-  <rect width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-  >
-  </rect>
-  <path d="M3 9h18M3 15h18M9 3v18M15 3v18">
+  <path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18">
   </path>
 </svg>
 `;
@@ -60,14 +46,7 @@ exports[`Using lucide icon components > should render an component 1`] = `
      stroke-linejoin="round"
      class="lucide lucide-grid3x3"
 >
-  <rect width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-  >
-  </rect>
-  <path d="M3 9h18M3 15h18M9 3v18M15 3v18">
+  <path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18">
   </path>
 </svg>
 `;
diff --git a/packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap b/packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap
index 34fc8fbafe5..62a28db7a7e 100644
--- a/packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap
+++ b/packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap
@@ -11,24 +11,12 @@ exports[`Using lucide icon components > should adjust the size, stroke color and
      stroke-linecap="round"
      stroke-linejoin="round"
 >
-  <rect fill="none"
-        stroke="red"
-        stroke-width="4"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-  >
-  </rect>
   <path fill="none"
         stroke="red"
         stroke-width="4"
         stroke-linecap="round"
         stroke-linejoin="round"
-        d="M3 9h18M3 15h18M9 3v18M15 3v18"
+        d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18"
   >
   </path>
 </svg>
@@ -46,24 +34,12 @@ exports[`Using lucide icon components > should duplicate properties to children
      stroke-linejoin="round"
      data-testid="multiple-children"
 >
-  <rect fill="red"
-        stroke="white"
-        stroke-width="10"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-  >
-  </rect>
   <path fill="red"
         stroke="white"
         stroke-width="10"
         stroke-linecap="round"
         stroke-linejoin="round"
-        d="M3 9h18M3 15h18M9 3v18M15 3v18"
+        d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18"
   >
   </path>
 </svg>
@@ -80,24 +56,12 @@ exports[`Using lucide icon components > should not scale the strokeWidth when ab
      stroke-linecap="round"
      stroke-linejoin="round"
 >
-  <rect fill="none"
-        stroke="red"
-        stroke-width="1"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-  >
-  </rect>
   <path fill="none"
         stroke="red"
         stroke-width="1"
         stroke-linecap="round"
         stroke-linejoin="round"
-        d="M3 9h18M3 15h18M9 3v18M15 3v18"
+        d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18"
   >
   </path>
 </svg>
@@ -114,24 +78,12 @@ exports[`Using lucide icon components > should render an component 1`] = `
      stroke-linecap="round"
      stroke-linejoin="round"
 >
-  <rect fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-  >
-  </rect>
   <path fill="none"
         stroke="currentColor"
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
-        d="M3 9h18M3 15h18M9 3v18M15 3v18"
+        d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18"
   >
   </path>
 </svg>
@@ -149,24 +101,12 @@ exports[`Using lucide icon components > should work with a single child componen
      stroke-linejoin="round"
      data-testid="single-child"
 >
-  <rect fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-  >
-  </rect>
   <path fill="none"
         stroke="currentColor"
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
-        d="M3 9h18M3 15h18M9 3v18M15 3v18"
+        d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18"
   >
   </path>
   <svg xmlns="http://www.w3.org/2000/svg"
@@ -180,24 +120,12 @@ exports[`Using lucide icon components > should work with a single child componen
        stroke-linejoin="round"
        data-testid="child"
   >
-    <rect fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          width="18"
-          height="18"
-          x="3"
-          y="3"
-          rx="2"
-    >
-    </rect>
     <path fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
-          d="M3 9h18M3 15h18M9 3v18M15 3v18"
+          d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18"
     >
     </path>
   </svg>
@@ -216,24 +144,12 @@ exports[`Using lucide icon components > should work with several children compon
      stroke-linejoin="round"
      data-testid="multiple-children"
 >
-  <rect fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-  >
-  </rect>
   <path fill="none"
         stroke="currentColor"
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
-        d="M3 9h18M3 15h18M9 3v18M15 3v18"
+        d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18"
   >
   </path>
   <svg xmlns="http://www.w3.org/2000/svg"
@@ -247,24 +163,12 @@ exports[`Using lucide icon components > should work with several children compon
        stroke-linejoin="round"
        data-testid="child1"
   >
-    <rect fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          width="18"
-          height="18"
-          x="3"
-          y="3"
-          rx="2"
-    >
-    </rect>
     <path fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
-          d="M3 9h18M3 15h18M9 3v18M15 3v18"
+          d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18"
     >
     </path>
   </svg>
@@ -279,24 +183,12 @@ exports[`Using lucide icon components > should work with several children compon
        stroke-linejoin="round"
        data-testid="child2"
   >
-    <rect fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          width="18"
-          height="18"
-          x="3"
-          y="3"
-          rx="2"
-    >
-    </rect>
     <path fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
-          d="M3 9h18M3 15h18M9 3v18M15 3v18"
+          d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18"
     >
     </path>
   </svg>
diff --git a/packages/lucide-react/tests/__snapshots__/lucide-react.spec.tsx.snap b/packages/lucide-react/tests/__snapshots__/lucide-react.spec.tsx.snap
index e831f78e8e3..0647c415004 100644
--- a/packages/lucide-react/tests/__snapshots__/lucide-react.spec.tsx.snap
+++ b/packages/lucide-react/tests/__snapshots__/lucide-react.spec.tsx.snap
@@ -12,14 +12,7 @@ exports[`Using lucide icon components > should adjust the size, stroke color and
      stroke-linejoin="round"
      class="lucide lucide-grid3x3"
 >
-  <rect width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-  >
-  </rect>
-  <path d="M3 9h18M3 15h18M9 3v18M15 3v18">
+  <path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18">
   </path>
 </svg>
 `;
@@ -36,14 +29,7 @@ exports[`Using lucide icon components > should not scale the strokeWidth when ab
      stroke-linejoin="round"
      class="lucide lucide-grid3x3"
 >
-  <rect width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-  >
-  </rect>
-  <path d="M3 9h18M3 15h18M9 3v18M15 3v18">
+  <path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18">
   </path>
 </svg>
 `;
@@ -60,14 +46,7 @@ exports[`Using lucide icon components > should render an component 1`] = `
      stroke-linejoin="round"
      class="lucide lucide-grid3x3"
 >
-  <rect width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-  >
-  </rect>
-  <path d="M3 9h18M3 15h18M9 3v18M15 3v18">
+  <path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18">
   </path>
 </svg>
 `;
diff --git a/packages/lucide-solid/tests/__snapshots__/lucide-solid.spec.tsx.snap b/packages/lucide-solid/tests/__snapshots__/lucide-solid.spec.tsx.snap
index 2c3771c2ff5..d340eb7f6d4 100644
--- a/packages/lucide-solid/tests/__snapshots__/lucide-solid.spec.tsx.snap
+++ b/packages/lucide-solid/tests/__snapshots__/lucide-solid.spec.tsx.snap
@@ -13,16 +13,8 @@ exports[`Using lucide icon components > should adjust the size, stroke color and
      class="lucide lucide-icon lucide-grid3x3"
      data-testid="grid-icon"
 >
-  <rect width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-        key="afitv7"
-  >
-  </rect>
-  <path d="M3 9h18M3 15h18M9 3v18M15 3v18"
-        key="az6gm2"
+  <path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18"
+        key="y3dld"
   >
   </path>
 </svg>
@@ -41,16 +33,8 @@ exports[`Using lucide icon components > should not scale the strokeWidth when ab
      class="lucide lucide-icon lucide-grid3x3"
      data-testid="grid-icon"
 >
-  <rect width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-        key="afitv7"
-  >
-  </rect>
-  <path d="M3 9h18M3 15h18M9 3v18M15 3v18"
-        key="az6gm2"
+  <path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18"
+        key="y3dld"
   >
   </path>
 </svg>
@@ -68,16 +52,8 @@ exports[`Using lucide icon components > should render a component 1`] = `
      stroke-width="2"
      class="lucide lucide-icon lucide-grid3x3"
 >
-  <rect width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-        key="afitv7"
-  >
-  </rect>
-  <path d="M3 9h18M3 15h18M9 3v18M15 3v18"
-        key="az6gm2"
+  <path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18"
+        key="y3dld"
   >
   </path>
 </svg>
diff --git a/packages/lucide/tests/__snapshots__/lucide.spec.js.snap b/packages/lucide/tests/__snapshots__/lucide.spec.js.snap
index 2ad7fa641b7..f29eb2ae1ca 100644
--- a/packages/lucide/tests/__snapshots__/lucide.spec.js.snap
+++ b/packages/lucide/tests/__snapshots__/lucide.spec.js.snap
@@ -31,14 +31,7 @@ exports[`createIcons > should read elements from DOM and replace icon with alias
      data-lucide="grid"
      class="lucide lucide-grid"
 >
-  <rect width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-  >
-  </rect>
-  <path d="M3 9h18M3 15h18M9 3v18M15 3v18">
+  <path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M3 9h18M3 15h18M9 3v18M15 3v18">
   </path>
 </svg>
 `;
diff --git a/scripts/render/processSvg.mjs b/scripts/render/processSvg.mjs
index 1ada63bd1a6..dd288406800 100644
--- a/scripts/render/processSvg.mjs
+++ b/scripts/render/processSvg.mjs
@@ -24,7 +24,7 @@ function svgoPlugins(flatten) {
   const convertShapeToPath = flatten && { convertArcs: true };
   const mergePaths = flatten && { force: true };
 
-  return [
+  const plugins = [
     {
       name: 'removeAttrs',
       params: { attrs: '(fill|stroke.*)' },
@@ -39,6 +39,62 @@ function svgoPlugins(flatten) {
       },
     },
   ];
+
+  if (flatten) {
+    plugins.splice(1, 0, {
+      name: 'convertRectToPath',
+      fn: () => {
+        return {
+          element: {
+            enter: convertRectToPath,
+          },
+        };
+      },
+    });
+  }
+
+  return plugins;
+}
+
+function convertRectToPath(node, parentNode) {
+  if (node.name != 'rect' || node.attributes.width == null || node.attributes.height == null) {
+    return;
+  }
+
+  // convert rect to path
+  const x = Number(node.attributes.x || '0');
+  const y = Number(node.attributes.y || '0');
+  const width = Number(node.attributes.width);
+  const height = Number(node.attributes.height);
+  const rx = Math.min(Number(node.attributes.rx || node.attributes.ry || '0'), width / 2);
+  const ry = Math.min(Number(node.attributes.ry || node.attributes.rx || '0'), height / 2);
+  if (Number.isNaN(x - y + width - height + rx - ry)) return;
+
+  let pathData = '';
+  if (rx == 0 || ry == 0) {
+    pathData += `M${x} ${y}H${x + width}V${y + height}H${x}z`;
+  } else if (rx > 0 && ry > 0) {
+    pathData += `M${x + rx} ${y}`;
+    pathData += `H${x + width - rx}`;
+    pathData += `a${rx} ${ry} 0 0 1 ${rx} ${ry}`;
+    pathData += `V${y + height - ry}`;
+    pathData += `a${rx} ${ry} 0 0 1 ${-rx} ${ry}`;
+    pathData += `H${x + rx}`;
+    pathData += `a${rx} ${ry} 0 0 1 ${-rx} ${-ry}`;
+    pathData += `V${y + ry}`;
+    pathData += `a${rx} ${ry} 0 0 1 ${rx} ${-ry}`;
+    pathData += 'z';
+  } else {
+    return;
+  }
+  node.name = 'path';
+  node.attributes.d = pathData;
+  delete node.attributes.x;
+  delete node.attributes.y;
+  delete node.attributes.width;
+  delete node.attributes.height;
+  delete node.attributes.rx;
+  delete node.attributes.ry;
 }
 
 /**