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.
baarde · May 3, 2024 · 1c5072c · 1c5072c
1 parent 3d798ad
commit 1c5072c
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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>