Skip to content

Commit 8ca3b27

Browse files
authored
fix(emcn): match Folder icon geometry to FolderOpen (#6262)
Folder and FolderOpen toggle in place in the sidebar folder rows, but carried incompatible geometry: Folder was a fill-based outline in a tight 14.5x13 box at stroke 0.3, while FolderOpen is the house-standard stroke outline in -1 -2 24 24 at stroke 1.55. A square size-[16px] therefore scaled the closed folder to ~16x14.3px where the open one renders ~11.3x10px, so expanding a folder visibly shrank its icon. Redraw Folder as FolderOpen's own body outline closed along the bottom-right, so the pair shares a silhouette, a box and a stroke weight by construction.
1 parent 35fd4ef commit 8ca3b27

1 file changed

Lines changed: 15 additions & 10 deletions

File tree

packages/emcn/src/icons/folder.tsx

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,31 @@
11
import type { SVGProps } from 'react'
22

33
/**
4-
* Folder icon component
4+
* Folder icon component - closed counterpart of {@link FolderOpen}
5+
*
6+
* The path is FolderOpen's own body outline, closed along the bottom-right, so
7+
* the pair shares a silhouette, a box and a stroke weight. The two toggle in
8+
* place (sidebar folder rows), which makes any divergence read as the icon
9+
* changing size on expand.
10+
*
511
* @param props - SVG properties including className, fill, etc.
612
*/
713
export function Folder(props: SVGProps<SVGSVGElement>) {
814
return (
915
<svg
10-
width='14.5'
11-
height='13'
12-
viewBox='0 0 14.5 13'
16+
width='24'
17+
height='24'
18+
viewBox='-1 -2 24 24'
1319
fill='none'
20+
stroke='currentColor'
21+
strokeWidth='1.55'
22+
strokeLinecap='round'
23+
strokeLinejoin='round'
1424
xmlns='http://www.w3.org/2000/svg'
1525
aria-hidden='true'
1626
{...props}
1727
>
18-
<path
19-
d='M4.32e-07 5.83V3.8C4.32e-07 3.2 0 2.72 0.03 2.33C0.07 1.94 0.14 1.6 0.32 1.28C0.54 0.88 0.88 0.54 1.28 0.32C1.6 0.14 1.94 0.07 2.33 0.03C2.72 0 3.2 5.96e-05 3.8 5.96e-05C4.53 5.93e-05 5.03 -0.01 5.48 0.16C6.47 0.53 6.87 1.45 7.19 2.1L7.48 2.67H10.33C11.025 2.67 11.58 2.67 12.03 2.71C12.48 2.76 12.874 2.86 13.222 3.09C13.495 3.27 13.73 3.51 13.91 3.78C14.14 4.13 14.24 4.52 14.29 4.97C14.33 5.42 14.33 5.98 14.33 6.67C14.33 7.83 14.33 8.73 14.26 9.46C14.19 10.19 14.03 10.78 13.69 11.3C13.41 11.71 13.05 12.07 12.63 12.35C12.11 12.7 11.52 12.85 10.79 12.93C10.07 13 9.16 13 8 13H7.17C5.61 13 4.39 13 3.44 12.87C2.48 12.74 1.72 12.47 1.12 11.877C0.53 11.28 0.26 10.52 0.13 9.56C0 8.61 4.32e-07 7.39 4.32e-07 5.83ZM1 5.83C1 7.42 1 8.56 1.12 9.42C1.23 10.28 1.45 10.79 1.83 11.17C2.21 11.55 2.72 11.77 3.58 11.88C4.44 12 5.58 12 7.17 12H8C9.18 12 10.029 12 10.69 11.93C11.34 11.87 11.75 11.74 12.07 11.52C12.38 11.32 12.65 11.05 12.86 10.74C13.07 10.42 13.2 10.01 13.27 9.35C13.33 8.7 13.33 7.85 13.33 6.67C13.33 5.95 13.33 5.46 13.29 5.07C13.26 4.7 13.19 4.49 13.08 4.33C12.97 4.17 12.83 4.03 12.67 3.92C12.51 3.81 12.3 3.74 11.93 3.71C11.54 3.67 11.046 3.67 10.33 3.67H5.17C4.89 3.67 4.67 3.44 4.67 3.17C4.67 2.89 4.89 2.67 5.17 2.67H6.36L6.3 2.55C5.92 1.8 5.68 1.3 5.12 1.1C4.89 1.01 4.61 1 3.8 1C3.18 1 2.75 1 2.42 1.03C2.1 1.06 1.91 1.11 1.77 1.19C1.53 1.33 1.33 1.53 1.19 1.77C1.11 1.91 1.06 2.1 1.03 2.42C1 2.75 1 3.18 1 3.8V5.83Z'
20-
fill='currentColor'
21-
stroke='currentColor'
22-
strokeWidth='0.3'
23-
/>
28+
<path d='M3.75 17.25A2 2 0 0 1 1.75 15.25V4.25A2 2 0 0 1 3.75 2.25H7L9.5 5.25H14.5A2 2 0 0 1 16.5 7.25V15.25A2 2 0 0 1 14.5 17.25Z' />
2429
</svg>
2530
)
2631
}

0 commit comments

Comments
 (0)