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"
>
-
-
-
+
`;
@@ -36,14 +29,7 @@ exports[`Using lucide icon components > should not scale the strokeWidth when ab
stroke-linejoin="round"
class="lucide lucide-grid3x3"
>
-
-
-
+
`;
@@ -60,14 +46,7 @@ exports[`Using lucide icon components > should render an component 1`] = `
stroke-linejoin="round"
class="lucide lucide-grid3x3"
>
-
-
-
+
`;
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"
>
-
-
@@ -46,24 +34,12 @@ exports[`Using lucide icon components > should duplicate properties to children
stroke-linejoin="round"
data-testid="multiple-children"
>
-
-
@@ -80,24 +56,12 @@ exports[`Using lucide icon components > should not scale the strokeWidth when ab
stroke-linecap="round"
stroke-linejoin="round"
>
-
-
@@ -114,24 +78,12 @@ exports[`Using lucide icon components > should render an component 1`] = `
stroke-linecap="round"
stroke-linejoin="round"
>
-
-
@@ -149,24 +101,12 @@ exports[`Using lucide icon components > should work with a single child componen
stroke-linejoin="round"
data-testid="single-child"
>
-
-
@@ -216,24 +144,12 @@ exports[`Using lucide icon components > should work with several children compon
stroke-linejoin="round"
data-testid="multiple-children"
>
-
-
@@ -279,24 +183,12 @@ exports[`Using lucide icon components > should work with several children compon
stroke-linejoin="round"
data-testid="child2"
>
-
-
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"
>
-
-
-
+
`;
@@ -36,14 +29,7 @@ exports[`Using lucide icon components > should not scale the strokeWidth when ab
stroke-linejoin="round"
class="lucide lucide-grid3x3"
>
-
-
-
+
`;
@@ -60,14 +46,7 @@ exports[`Using lucide icon components > should render an component 1`] = `
stroke-linejoin="round"
class="lucide lucide-grid3x3"
>
-
-
-
+
`;
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"
>
-
-
-
@@ -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"
>
-
-
-
@@ -68,16 +52,8 @@ exports[`Using lucide icon components > should render a component 1`] = `
stroke-width="2"
class="lucide lucide-icon lucide-grid3x3"
>
-
-
-
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"
>
-
-
-
+
`;
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;
}
/**