Skip to content

Commit 3d798ad

Browse files
baardebaarde
committed
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.
1 parent 4eb14e4 commit 3d798ad

File tree

17 files changed

+88
-695
lines changed

17 files changed

+88
-695
lines changed

‎packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.tsx.snap‎

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,7 @@ exports[`Using lucide icon components > should adjust the size, stroke color and
1919
rx="2"
2020
>
2121
</rect>
22-
<path d="M3 9h18">
23-
</path>
24-
<path d="M3 15h18">
25-
</path>
26-
<path d="M9 3v18">
27-
</path>
28-
<path d="M15 3v18">
22+
<path d="M3 9h18M3 15h18M9 3v18M15 3v18">
2923
</path>
3024
</svg>
3125
`;
@@ -49,13 +43,7 @@ exports[`Using lucide icon components > should not scale the strokeWidth when ab
4943
rx="2"
5044
>
5145
</rect>
52-
<path d="M3 9h18">
53-
</path>
54-
<path d="M3 15h18">
55-
</path>
56-
<path d="M9 3v18">
57-
</path>
58-
<path d="M15 3v18">
46+
<path d="M3 9h18M3 15h18M9 3v18M15 3v18">
5947
</path>
6048
</svg>
6149
`;
@@ -79,13 +67,7 @@ exports[`Using lucide icon components > should render an component 1`] = `
7967
rx="2"
8068
>
8169
</rect>
82-
<path d="M3 9h18">
83-
</path>
84-
<path d="M3 15h18">
85-
</path>
86-
<path d="M9 3v18">
87-
</path>
88-
<path d="M15 3v18">
70+
<path d="M3 9h18M3 15h18M9 3v18M15 3v18">
8971
</path>
9072
</svg>
9173
`;

‎packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap‎

Lines changed: 9 additions & 225 deletions
Original file line numberDiff line numberDiff line change
@@ -28,31 +28,7 @@ exports[`Using lucide icon components > should adjust the size, stroke color and
2828
stroke-width="4"
2929
stroke-linecap="round"
3030
stroke-linejoin="round"
31-
d="M3 9h18"
32-
>
33-
</path>
34-
<path fill="none"
35-
stroke="red"
36-
stroke-width="4"
37-
stroke-linecap="round"
38-
stroke-linejoin="round"
39-
d="M3 15h18"
40-
>
41-
</path>
42-
<path fill="none"
43-
stroke="red"
44-
stroke-width="4"
45-
stroke-linecap="round"
46-
stroke-linejoin="round"
47-
d="M9 3v18"
48-
>
49-
</path>
50-
<path fill="none"
51-
stroke="red"
52-
stroke-width="4"
53-
stroke-linecap="round"
54-
stroke-linejoin="round"
55-
d="M15 3v18"
31+
d="M3 9h18M3 15h18M9 3v18M15 3v18"
5632
>
5733
</path>
5834
</svg>
@@ -87,31 +63,7 @@ exports[`Using lucide icon components > should duplicate properties to children
8763
stroke-width="10"
8864
stroke-linecap="round"
8965
stroke-linejoin="round"
90-
d="M3 9h18"
91-
>
92-
</path>
93-
<path fill="red"
94-
stroke="white"
95-
stroke-width="10"
96-
stroke-linecap="round"
97-
stroke-linejoin="round"
98-
d="M3 15h18"
99-
>
100-
</path>
101-
<path fill="red"
102-
stroke="white"
103-
stroke-width="10"
104-
stroke-linecap="round"
105-
stroke-linejoin="round"
106-
d="M9 3v18"
107-
>
108-
</path>
109-
<path fill="red"
110-
stroke="white"
111-
stroke-width="10"
112-
stroke-linecap="round"
113-
stroke-linejoin="round"
114-
d="M15 3v18"
66+
d="M3 9h18M3 15h18M9 3v18M15 3v18"
11567
>
11668
</path>
11769
</svg>
@@ -145,31 +97,7 @@ exports[`Using lucide icon components > should not scale the strokeWidth when ab
14597
stroke-width="1"
14698
stroke-linecap="round"
14799
stroke-linejoin="round"
148-
d="M3 9h18"
149-
>
150-
</path>
151-
<path fill="none"
152-
stroke="red"
153-
stroke-width="1"
154-
stroke-linecap="round"
155-
stroke-linejoin="round"
156-
d="M3 15h18"
157-
>
158-
</path>
159-
<path fill="none"
160-
stroke="red"
161-
stroke-width="1"
162-
stroke-linecap="round"
163-
stroke-linejoin="round"
164-
d="M9 3v18"
165-
>
166-
</path>
167-
<path fill="none"
168-
stroke="red"
169-
stroke-width="1"
170-
stroke-linecap="round"
171-
stroke-linejoin="round"
172-
d="M15 3v18"
100+
d="M3 9h18M3 15h18M9 3v18M15 3v18"
173101
>
174102
</path>
175103
</svg>
@@ -203,31 +131,7 @@ exports[`Using lucide icon components > should render an component 1`] = `
203131
stroke-width="2"
204132
stroke-linecap="round"
205133
stroke-linejoin="round"
206-
d="M3 9h18"
207-
>
208-
</path>
209-
<path fill="none"
210-
stroke="currentColor"
211-
stroke-width="2"
212-
stroke-linecap="round"
213-
stroke-linejoin="round"
214-
d="M3 15h18"
215-
>
216-
</path>
217-
<path fill="none"
218-
stroke="currentColor"
219-
stroke-width="2"
220-
stroke-linecap="round"
221-
stroke-linejoin="round"
222-
d="M9 3v18"
223-
>
224-
</path>
225-
<path fill="none"
226-
stroke="currentColor"
227-
stroke-width="2"
228-
stroke-linecap="round"
229-
stroke-linejoin="round"
230-
d="M15 3v18"
134+
d="M3 9h18M3 15h18M9 3v18M15 3v18"
231135
>
232136
</path>
233137
</svg>
@@ -262,31 +166,7 @@ exports[`Using lucide icon components > should work with a single child componen
262166
stroke-width="2"
263167
stroke-linecap="round"
264168
stroke-linejoin="round"
265-
d="M3 9h18"
266-
>
267-
</path>
268-
<path fill="none"
269-
stroke="currentColor"
270-
stroke-width="2"
271-
stroke-linecap="round"
272-
stroke-linejoin="round"
273-
d="M3 15h18"
274-
>
275-
</path>
276-
<path fill="none"
277-
stroke="currentColor"
278-
stroke-width="2"
279-
stroke-linecap="round"
280-
stroke-linejoin="round"
281-
d="M9 3v18"
282-
>
283-
</path>
284-
<path fill="none"
285-
stroke="currentColor"
286-
stroke-width="2"
287-
stroke-linecap="round"
288-
stroke-linejoin="round"
289-
d="M15 3v18"
169+
d="M3 9h18M3 15h18M9 3v18M15 3v18"
290170
>
291171
</path>
292172
<svg xmlns="http://www.w3.org/2000/svg"
@@ -317,31 +197,7 @@ exports[`Using lucide icon components > should work with a single child componen
317197
stroke-width="2"
318198
stroke-linecap="round"
319199
stroke-linejoin="round"
320-
d="M3 9h18"
321-
>
322-
</path>
323-
<path fill="none"
324-
stroke="currentColor"
325-
stroke-width="2"
326-
stroke-linecap="round"
327-
stroke-linejoin="round"
328-
d="M3 15h18"
329-
>
330-
</path>
331-
<path fill="none"
332-
stroke="currentColor"
333-
stroke-width="2"
334-
stroke-linecap="round"
335-
stroke-linejoin="round"
336-
d="M9 3v18"
337-
>
338-
</path>
339-
<path fill="none"
340-
stroke="currentColor"
341-
stroke-width="2"
342-
stroke-linecap="round"
343-
stroke-linejoin="round"
344-
d="M15 3v18"
200+
d="M3 9h18M3 15h18M9 3v18M15 3v18"
345201
>
346202
</path>
347203
</svg>
@@ -377,31 +233,7 @@ exports[`Using lucide icon components > should work with several children compon
377233
stroke-width="2"
378234
stroke-linecap="round"
379235
stroke-linejoin="round"
380-
d="M3 9h18"
381-
>
382-
</path>
383-
<path fill="none"
384-
stroke="currentColor"
385-
stroke-width="2"
386-
stroke-linecap="round"
387-
stroke-linejoin="round"
388-
d="M3 15h18"
389-
>
390-
</path>
391-
<path fill="none"
392-
stroke="currentColor"
393-
stroke-width="2"
394-
stroke-linecap="round"
395-
stroke-linejoin="round"
396-
d="M9 3v18"
397-
>
398-
</path>
399-
<path fill="none"
400-
stroke="currentColor"
401-
stroke-width="2"
402-
stroke-linecap="round"
403-
stroke-linejoin="round"
404-
d="M15 3v18"
236+
d="M3 9h18M3 15h18M9 3v18M15 3v18"
405237
>
406238
</path>
407239
<svg xmlns="http://www.w3.org/2000/svg"
@@ -432,31 +264,7 @@ exports[`Using lucide icon components > should work with several children compon
432264
stroke-width="2"
433265
stroke-linecap="round"
434266
stroke-linejoin="round"
435-
d="M3 9h18"
436-
>
437-
</path>
438-
<path fill="none"
439-
stroke="currentColor"
440-
stroke-width="2"
441-
stroke-linecap="round"
442-
stroke-linejoin="round"
443-
d="M3 15h18"
444-
>
445-
</path>
446-
<path fill="none"
447-
stroke="currentColor"
448-
stroke-width="2"
449-
stroke-linecap="round"
450-
stroke-linejoin="round"
451-
d="M9 3v18"
452-
>
453-
</path>
454-
<path fill="none"
455-
stroke="currentColor"
456-
stroke-width="2"
457-
stroke-linecap="round"
458-
stroke-linejoin="round"
459-
d="M15 3v18"
267+
d="M3 9h18M3 15h18M9 3v18M15 3v18"
460268
>
461269
</path>
462270
</svg>
@@ -488,31 +296,7 @@ exports[`Using lucide icon components > should work with several children compon
488296
stroke-width="2"
489297
stroke-linecap="round"
490298
stroke-linejoin="round"
491-
d="M3 9h18"
492-
>
493-
</path>
494-
<path fill="none"
495-
stroke="currentColor"
496-
stroke-width="2"
497-
stroke-linecap="round"
498-
stroke-linejoin="round"
499-
d="M3 15h18"
500-
>
501-
</path>
502-
<path fill="none"
503-
stroke="currentColor"
504-
stroke-width="2"
505-
stroke-linecap="round"
506-
stroke-linejoin="round"
507-
d="M9 3v18"
508-
>
509-
</path>
510-
<path fill="none"
511-
stroke="currentColor"
512-
stroke-width="2"
513-
stroke-linecap="round"
514-
stroke-linejoin="round"
515-
d="M15 3v18"
299+
d="M3 9h18M3 15h18M9 3v18M15 3v18"
516300
>
517301
</path>
518302
</svg>

‎packages/lucide-react/tests/__snapshots__/dynamicImports.spec.tsx.snap‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,7 @@ exports[`Using dynamicImports > should render icons dynamically by using the dyn
1313
class="lucide lucide-smile"
1414
aria-label="smile"
1515
>
16-
<circle cx="12"
17-
cy="12"
18-
r="10"
19-
>
20-
</circle>
21-
<path d="M8 14s1.5 2 4 2 4-2 4-2">
16+
<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">
2217
</path>
23-
<line x1="9"
24-
x2="9.01"
25-
y1="9"
26-
y2="9"
27-
>
28-
</line>
29-
<line x1="15"
30-
x2="15.01"
31-
y1="9"
32-
y2="9"
33-
>
34-
</line>
3518
</svg>
3619
`;

0 commit comments

Comments
 (0)