gahusb/web-page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(saju-ui-v2): Icons.jsx — 5 nav + IconPaw/Chevron/Sparkle

Browse Source
This commit is contained in:
gahusb
2026-05-27 02:00:45 +09:00
parent 47b5eab3ff
commit cc9028ac3d
1 changed files with 82 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/pages/saju/_shell/Icons.jsx Normal file
View File

@@ -0,0 +1,82 @@
import React from 'react';
const base = (size, stroke, strokeWidth = 1.5) => ({
width: size, height: size, fill: 'none', stroke,
strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round',
});
export function IconHome({ size = 20, stroke = 'currentColor', strokeWidth }) {
return (
<svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
<path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-3v-6h-8v6H5a2 2 0 0 1-2-2z" />
</svg>
);
}
export function IconSun({ size = 20, stroke = 'currentColor', strokeWidth }) {
return (
<svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
<circle cx="12" cy="12" r="4" />
<path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2" />
</svg>
);
}
export function IconHeart({ size = 20, stroke = 'currentColor', strokeWidth }) {
return (
<svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
<path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 7a5.5 5.5 0 0 1 9.5 5c-2.5 4.5-9.5 9-9.5 9z" />
</svg>
);
}
export function IconYinYang({ size = 20, stroke = 'currentColor', strokeWidth }) {
return (
<svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
<circle cx="12" cy="12" r="9" />
<path d="M12 3a4.5 4.5 0 0 0 0 9 4.5 4.5 0 0 1 0 9" />
<circle cx="12" cy="7.5" r="1" fill={stroke} />
<circle cx="12" cy="16.5" r="1" fill={stroke} />
</svg>
);
}
export function IconUser({ size = 20, stroke = 'currentColor', strokeWidth }) {
return (
<svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
<circle cx="12" cy="8" r="4" />
<path d="M4 21c1-4 5-6 8-6s7 2 8 6" />
</svg>
);
}
export function IconPaw({ size = 12, color = 'currentColor' }) {
return (
<svg viewBox="0 0 24 24" width={size} height={size} fill={color}>
<ellipse cx="6" cy="10" rx="2" ry="2.5" />
<ellipse cx="10" cy="6" rx="2" ry="2.5" />
<ellipse cx="14" cy="6" rx="2" ry="2.5" />
<ellipse cx="18" cy="10" rx="2" ry="2.5" />
<path d="M8 14c0-2 2-3 4-3s4 1 4 3-2 5-4 5-4-3-4-5z" />
</svg>
);
}
export function IconChevron({ size = 14, color = 'currentColor', dir = 'right' }) {
const rotate = { right: 0, down: 90, left: 180, up: 270 }[dir] || 0;
return (
<svg viewBox="0 0 24 24" width={size} height={size}
fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
style={{ transform: `rotate(${rotate}deg)` }}>
<path d="M9 6l6 6-6 6" />
</svg>
);
}
export function IconSparkle({ size = 12, color = 'currentColor' }) {
return (
<svg viewBox="0 0 24 24" width={size} height={size} fill={color}>
<path d="M12 2l2 7 7 2-7 2-2 7-2-7-7-2 7-2z" />
</svg>
);
}