Flatten icons during build

Transform shapes to paths and merge all paths together. This reduces the icon size and solves the issue of overlapping strokes when using a transparent color.
lucide-icons · May 3, 2024 · 3d798ad · 3d798ad
1 parent 4eb14e4
commit 3d798ad
Show file tree

Hide file tree

Showing 17 changed files with 88 additions and 695 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
@@ -19,13 +19,7 @@ exports[`Using lucide icon components > should adjust the size, stroke color and
         rx="2"
   >
   </rect>
-  <path d="M3 9h18">
-  </path>
-  <path d="M3 15h18">
-  </path>
-  <path d="M9 3v18">
-  </path>
-  <path d="M15 3v18">
+  <path d="M3 9h18M3 15h18M9 3v18M15 3v18">
   </path>
 </svg>
 `;
@@ -49,13 +43,7 @@ exports[`Using lucide icon components > should not scale the strokeWidth when ab
         rx="2"
   >
   </rect>
-  <path d="M3 9h18">
-  </path>
-  <path d="M3 15h18">
-  </path>
-  <path d="M9 3v18">
-  </path>
-  <path d="M15 3v18">
+  <path d="M3 9h18M3 15h18M9 3v18M15 3v18">
   </path>
 </svg>
 `;
@@ -79,13 +67,7 @@ exports[`Using lucide icon components > should render an component 1`] = `
         rx="2"
   >
   </rect>
-  <path d="M3 9h18">
-  </path>
-  <path d="M3 15h18">
-  </path>
-  <path d="M9 3v18">
-  </path>
-  <path d="M15 3v18">
+  <path d="M3 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
@@ -28,31 +28,7 @@ exports[`Using lucide icon components > should adjust the size, stroke color and
         stroke-width="4"
         stroke-linecap="round"
         stroke-linejoin="round"
-        d="M3 9h18"
-  >
-  </path>
-  <path fill="none"
-        stroke="red"
-        stroke-width="4"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M3 15h18"
-  >
-  </path>
-  <path fill="none"
-        stroke="red"
-        stroke-width="4"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M9 3v18"
-  >
-  </path>
-  <path fill="none"
-        stroke="red"
-        stroke-width="4"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M15 3v18"
+        d="M3 9h18M3 15h18M9 3v18M15 3v18"
   >
   </path>
 </svg>
@@ -87,31 +63,7 @@ exports[`Using lucide icon components > should duplicate properties to children
         stroke-width="10"
         stroke-linecap="round"
         stroke-linejoin="round"
-        d="M3 9h18"
-  >
-  </path>
-  <path fill="red"
-        stroke="white"
-        stroke-width="10"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M3 15h18"
-  >
-  </path>
-  <path fill="red"
-        stroke="white"
-        stroke-width="10"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M9 3v18"
-  >
-  </path>
-  <path fill="red"
-        stroke="white"
-        stroke-width="10"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M15 3v18"
+        d="M3 9h18M3 15h18M9 3v18M15 3v18"
   >
   </path>
 </svg>
@@ -145,31 +97,7 @@ exports[`Using lucide icon components > should not scale the strokeWidth when ab
         stroke-width="1"
         stroke-linecap="round"
         stroke-linejoin="round"
-        d="M3 9h18"
-  >
-  </path>
-  <path fill="none"
-        stroke="red"
-        stroke-width="1"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M3 15h18"
-  >
-  </path>
-  <path fill="none"
-        stroke="red"
-        stroke-width="1"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M9 3v18"
-  >
-  </path>
-  <path fill="none"
-        stroke="red"
-        stroke-width="1"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M15 3v18"
+        d="M3 9h18M3 15h18M9 3v18M15 3v18"
   >
   </path>
 </svg>
@@ -203,31 +131,7 @@ exports[`Using lucide icon components > should render an component 1`] = `
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
-        d="M3 9h18"
-  >
-  </path>
-  <path fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M3 15h18"
-  >
-  </path>
-  <path fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M9 3v18"
-  >
-  </path>
-  <path fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M15 3v18"
+        d="M3 9h18M3 15h18M9 3v18M15 3v18"
   >
   </path>
 </svg>
@@ -262,31 +166,7 @@ exports[`Using lucide icon components > should work with a single child componen
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
-        d="M3 9h18"
-  >
-  </path>
-  <path fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M3 15h18"
-  >
-  </path>
-  <path fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M9 3v18"
-  >
-  </path>
-  <path fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M15 3v18"
+        d="M3 9h18M3 15h18M9 3v18M15 3v18"
   >
   </path>
   <svg xmlns="http://www.w3.org/2000/svg"
@@ -317,31 +197,7 @@ exports[`Using lucide icon components > should work with a single child componen
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
-          d="M3 9h18"
-    >
-    </path>
-    <path fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M3 15h18"
-    >
-    </path>
-    <path fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M9 3v18"
-    >
-    </path>
-    <path fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M15 3v18"
+          d="M3 9h18M3 15h18M9 3v18M15 3v18"
     >
     </path>
   </svg>
@@ -377,31 +233,7 @@ exports[`Using lucide icon components > should work with several children compon
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
-        d="M3 9h18"
-  >
-  </path>
-  <path fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M3 15h18"
-  >
-  </path>
-  <path fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M9 3v18"
-  >
-  </path>
-  <path fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M15 3v18"
+        d="M3 9h18M3 15h18M9 3v18M15 3v18"
   >
   </path>
   <svg xmlns="http://www.w3.org/2000/svg"
@@ -432,31 +264,7 @@ exports[`Using lucide icon components > should work with several children compon
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
-          d="M3 9h18"
-    >
-    </path>
-    <path fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M3 15h18"
-    >
-    </path>
-    <path fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M9 3v18"
-    >
-    </path>
-    <path fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M15 3v18"
+          d="M3 9h18M3 15h18M9 3v18M15 3v18"
     >
     </path>
   </svg>
@@ -488,31 +296,7 @@ exports[`Using lucide icon components > should work with several children compon
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
-          d="M3 9h18"
-    >
-    </path>
-    <path fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M3 15h18"
-    >
-    </path>
-    <path fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M9 3v18"
-    >
-    </path>
-    <path fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M15 3v18"
+          d="M3 9h18M3 15h18M9 3v18M15 3v18"
     >
     </path>
   </svg>

diff --git a/packages/lucide-react/tests/__snapshots__/dynamicImports.spec.tsx.snap b/packages/lucide-react/tests/__snapshots__/dynamicImports.spec.tsx.snap
@@ -13,24 +13,7 @@ exports[`Using dynamicImports > should render icons dynamically by using the dyn
      class="lucide lucide-smile"
      aria-label="smile"
 >
-  <circle cx="12"
-          cy="12"
-          r="10"
-  >
-  </circle>
-  <path d="M8 14s1.5 2 4 2 4-2 4-2">
+  <path d="M12 2a10 10 0 1 0 0 20 10 10 0 1 0 0-20M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01">
   </path>
-  <line x1="9"
-        x2="9.01"
-        y1="9"
-        y2="9"
-  >
-  </line>
-  <line x1="15"
-        x2="15.01"
-        y1="9"
-        y2="9"
-  >
-  </line>
 </svg>
 `;