mirror of
https://github.com/simstudioai/sim.git
synced 2026-09-24 15:45:35 +08:00
fix(icons): match folder icon optical size to sibling resource icons (#6692)
The folder icon read visibly smaller than the table/database icons beside it in resource rows despite an identical size-[14px] class, because the class sets the SVG box and not the artwork inside it. The folder outline only spanned 15 units of the shared -1 -2 24 24 box against 17.5-18 for its siblings. Scale the outline to a 17-unit extent on the same .25 grid and quarter circle corner radii, keeping the body path byte-identical across Folder, FolderOpen and FolderCode so the sidebar expand/collapse toggle does not shift. FolderCode's brackets move with the body they are centred on.
This commit is contained in:
@@ -4,9 +4,9 @@ import type { SVGProps } from 'react'
|
||||
* FolderCode icon component - a {@link Folder} carrying code brackets
|
||||
*
|
||||
* Shares {@link Folder}'s body path verbatim so the folder family reads as one
|
||||
* silhouette at one weight. The brackets are centred on the body (x 9.125,
|
||||
* y 11.25) rather than on the viewBox, so they sit inside the folder rather
|
||||
* than drifting toward the flap.
|
||||
* silhouette at one weight. The brackets are centred on the body (x 9, y 11.5)
|
||||
* rather than on the viewBox, so they sit inside the folder rather than
|
||||
* drifting toward the flap.
|
||||
*
|
||||
* @param props - SVG properties including className, fill, etc.
|
||||
*/
|
||||
@@ -25,9 +25,9 @@ export function FolderCode(props: SVGProps<SVGSVGElement>) {
|
||||
aria-hidden='true'
|
||||
{...props}
|
||||
>
|
||||
<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' />
|
||||
<path d='M7.75 9.5L6 11.25L7.75 13' />
|
||||
<path d='M10.5 9.5L12.25 11.25L10.5 13' />
|
||||
<path d='M3 18.25A2.25 2.25 0 0 1 0.75 16V3.5A2.25 2.25 0 0 1 3 1.25H6.5L9.5 4.75H15A2.25 2.25 0 0 1 17.25 7V16A2.25 2.25 0 0 1 15 18.25Z' />
|
||||
<path d='M7.5 9.5L5.5 11.5L7.5 13.5' />
|
||||
<path d='M10.5 9.5L12.5 11.5L10.5 13.5' />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,6 +2,10 @@ import type { SVGProps } from 'react'
|
||||
|
||||
/**
|
||||
* FolderOpen icon component - folder with its front panel tilted open
|
||||
*
|
||||
* The body outline is {@link Folder}'s path verbatim up to the flap join, so
|
||||
* the pair toggles in place without shifting. Keep the two in lockstep.
|
||||
*
|
||||
* @param props - SVG properties including className, fill, etc.
|
||||
*/
|
||||
export function FolderOpen(props: SVGProps<SVGSVGElement>) {
|
||||
@@ -19,8 +23,8 @@ export function FolderOpen(props: SVGProps<SVGSVGElement>) {
|
||||
aria-hidden='true'
|
||||
{...props}
|
||||
>
|
||||
<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.25V9.25' />
|
||||
<path d='M6.25 9.25H18.75L16.25 17.25H3.75Z' />
|
||||
<path d='M3 18.25A2.25 2.25 0 0 1 0.75 16V3.5A2.25 2.25 0 0 1 3 1.25H6.5L9.5 4.75H15A2.25 2.25 0 0 1 17.25 7V9.25' />
|
||||
<path d='M5.75 9.25H19.75L17 18.25H3Z' />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -8,6 +8,13 @@ import type { SVGProps } from 'react'
|
||||
* place (sidebar folder rows), which makes any divergence read as the icon
|
||||
* changing size on expand.
|
||||
*
|
||||
* The outline is drawn to the same optical extent as the sibling list icons
|
||||
* ({@link Table}, {@link Database}) — ~17 units tall inside the shared
|
||||
* `-1 -2 24 24` box. Drawn smaller it reads as a smaller icon in a resource
|
||||
* row even at an identical `size-*` class, since the class sets the box, not
|
||||
* the artwork. Any change here must be mirrored in {@link FolderOpen} and
|
||||
* {@link FolderCode}, which reuse this outline verbatim.
|
||||
*
|
||||
* @param props - SVG properties including className, fill, etc.
|
||||
*/
|
||||
export function Folder(props: SVGProps<SVGSVGElement>) {
|
||||
@@ -25,7 +32,7 @@ export function Folder(props: SVGProps<SVGSVGElement>) {
|
||||
aria-hidden='true'
|
||||
{...props}
|
||||
>
|
||||
<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' />
|
||||
<path d='M3 18.25A2.25 2.25 0 0 1 0.75 16V3.5A2.25 2.25 0 0 1 3 1.25H6.5L9.5 4.75H15A2.25 2.25 0 0 1 17.25 7V16A2.25 2.25 0 0 1 15 18.25Z' />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user