figmar
9ea9e9b9fa
The apes tab glyphs (智能体/应用/画像) were fill-only paths spanning only 10-12 of the 16 viewBox units, so they rendered visibly smaller and lighter than the DSH native glyphs (which fill ~92-96% of the box) in the + new-tab menu and the right-panel tile grid. Rewrite them in this repo's own outline recipe (src/client/icons.tsx): 16x16 viewBox, artwork on 1.5-14.5, 1.5px currentColor stroke, round caps/joins. Renamed IconAgentFill16/IconGaugeFill16/IconUserFill16 -> IconAgentOutline16/IconAppsOutline16/IconUserOutline16.
51 lines
2.5 KiB
TypeScript
51 lines
2.5 KiB
TypeScript
/**
|
||
* Tab glyphs for the apes tabs (智能体 / 应用 / 画像).
|
||
*
|
||
* These follow the SAME recipe as this repo's own icon set in
|
||
* `src/client/icons.tsx` — the one the sidebar already uses for 终端 /
|
||
* 浏览器 / 文件变动: a 16×16 viewBox whose artwork spans 1.5–14.5, a 1.5px
|
||
* `currentColor` stroke, round caps/joins, `fill: none`.
|
||
*
|
||
* That recipe is what makes an icon sit at the native visual weight in the
|
||
* `+` new-tab menu and the right-panel tile grid: DSH's own glyphs fill
|
||
* ~92–96% of the box, so artwork padded any tighter renders visibly small
|
||
* next to them.
|
||
*
|
||
* (An earlier revision drew these as fill-only paths spanning only 10–12 of
|
||
* the 16 units — that is why they read as a separate, lighter family.)
|
||
*/
|
||
import type { ReactNode } from 'react'
|
||
|
||
/** Agent glyph: a rounded robot head with two fill eyes. */
|
||
export function IconAgentOutline16({ size = 16, className }: { size?: number; className?: string }): ReactNode {
|
||
return (
|
||
<svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
|
||
<rect x="1.5" y="3" width="13" height="11.5" rx="4.2" stroke="currentColor" strokeWidth="1.5" />
|
||
<circle cx="5.8" cy="8.6" r="1.25" fill="currentColor" />
|
||
<circle cx="10.2" cy="8.6" r="1.25" fill="currentColor" />
|
||
</svg>
|
||
)
|
||
}
|
||
|
||
/** Apps glyph: a 2×2 grid of rounded squares. */
|
||
export function IconAppsOutline16({ size = 16, className }: { size?: number; className?: string }): ReactNode {
|
||
return (
|
||
<svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
|
||
<rect x="1.5" y="1.5" width="5.5" height="5.5" rx="1.8" stroke="currentColor" strokeWidth="1.5" />
|
||
<rect x="9" y="1.5" width="5.5" height="5.5" rx="1.8" stroke="currentColor" strokeWidth="1.5" />
|
||
<rect x="1.5" y="9" width="5.5" height="5.5" rx="1.8" stroke="currentColor" strokeWidth="1.5" />
|
||
<rect x="9" y="9" width="5.5" height="5.5" rx="1.8" stroke="currentColor" strokeWidth="1.5" />
|
||
</svg>
|
||
)
|
||
}
|
||
|
||
/** Profile glyph: a head over shoulders. */
|
||
export function IconUserOutline16({ size = 16, className }: { size?: number; className?: string }): ReactNode {
|
||
return (
|
||
<svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
|
||
<circle cx="8" cy="4.9" r="3.4" stroke="currentColor" strokeWidth="1.5" />
|
||
<path d="M1.5 14.5c0-3.3 2.8-5.3 6.5-5.3s6.5 2 6.5 5.3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
|
||
</svg>
|
||
)
|
||
}
|