90 lines
5.2 KiB
JavaScript
90 lines
5.2 KiB
JavaScript
// ============================================================
|
|
// vibn-ai-templates/icons.jsx
|
|
// ------------------------------------------------------------
|
|
// A tiny Tabler-style stroke-icon helper + a curated set of
|
|
// paths used by the components. All inherit `currentColor` so
|
|
// they re-tint to whatever the parent's CSS color is.
|
|
//
|
|
// Usage:
|
|
// <Icon name="search" />
|
|
// <Icon path={icons.bell} size={20} stroke={2} />
|
|
// ============================================================
|
|
|
|
const icons = {
|
|
// Navigation / surface
|
|
home: <><path d="m3 12 9-9 9 9"/><path d="M5 10v10h14V10"/></>,
|
|
inbox: <><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5 5h14l3 7v7H2v-7z"/></>,
|
|
search: <><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></>,
|
|
bell: <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></>,
|
|
settings:<><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8L4.2 7a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3 1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8 1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></>,
|
|
|
|
// Objects
|
|
people: <><circle cx="9" cy="8" r="4"/><path d="M3 21a6 6 0 0 1 12 0"/><circle cx="17" cy="6" r="3"/><path d="M21 17a4 4 0 0 0-6-3.5"/></>,
|
|
building: <><path d="M3 21h18M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16"/><path d="M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2"/></>,
|
|
target: <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></>,
|
|
doc: <><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></>,
|
|
check: <><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></>,
|
|
bar: <><path d="M3 3v18h18"/><rect x="7" y="11" width="3" height="7"/><rect x="13" y="7" width="3" height="11"/></>,
|
|
workflow: <><rect x="3" y="3" width="6" height="6" rx="1"/><rect x="15" y="15" width="6" height="6" rx="1"/><path d="M9 6h6a3 3 0 0 1 3 3v6"/></>,
|
|
|
|
// Actions
|
|
plus: <path d="M12 5v14M5 12h14"/>,
|
|
x: <path d="M6 6l12 12M18 6L6 18"/>,
|
|
more: <><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></>,
|
|
chevDown:<path d="m6 9 6 6 6-6"/>,
|
|
chevUp: <path d="m6 15 6-6 6 6"/>,
|
|
chevLeft:<path d="m15 6-6 6 6 6"/>,
|
|
chevRight:<path d="m9 6 6 6-6 6"/>,
|
|
arrow: <path d="M5 12h14M13 5l7 7-7 7"/>,
|
|
arrowUp: <path d="M12 19V5M5 12l7-7 7 7"/>,
|
|
arrowDown:<path d="M12 5v14M5 12l7 7 7-7"/>,
|
|
|
|
// Status
|
|
checkOnly: <path d="M5 12l5 5L20 7"/>,
|
|
alert: <><path d="M12 9v4M12 17v.01"/><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.7 3.86a2 2 0 0 0-3.4 0z"/></>,
|
|
info: <><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></>,
|
|
eye: <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></>,
|
|
eyeOff: <><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 11 7 11 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 1 12s4 7 11 7a9.74 9.74 0 0 0 5.39-1.61"/><path d="M2 2l20 20"/></>,
|
|
star: <path d="m12 3 2.6 6.2 6.7.5-5.1 4.4 1.6 6.6L12 17.3 6.2 20.7l1.6-6.6L2.7 9.7l6.7-.5z"/>,
|
|
spark: <path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l3 3M15 15l3 3M6 18l3-3M15 9l3-3"/>,
|
|
bolt: <path d="m13 2-9 13h7l-1 7 9-13h-7z"/>,
|
|
shield: <path d="M12 2 4 5v7c0 5 3.5 9 8 10 4.5-1 8-5 8-10V5z"/>,
|
|
|
|
// Misc
|
|
briefcase: <><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 13h18"/></>,
|
|
link: <><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></>,
|
|
copy: <><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></>,
|
|
};
|
|
|
|
const Icon = ({ name, path, size = 16, stroke = 1.6, style, className }) => (
|
|
<svg
|
|
width={size} height={size} viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" strokeWidth={stroke}
|
|
strokeLinecap="round" strokeLinejoin="round"
|
|
style={{ display: "inline-block", verticalAlign: "middle", flexShrink: 0, ...style }}
|
|
className={className}
|
|
aria-hidden="true"
|
|
>
|
|
{path ?? icons[name]}
|
|
</svg>
|
|
);
|
|
|
|
// Tiny brand mark — a gradient triangle, the same as we've been
|
|
// using everywhere. Exported here so consumers don't redraw it.
|
|
const VibnMark = ({ size = 22 }) => {
|
|
const id = `vmk_${size}`;
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<defs>
|
|
<linearGradient id={id} x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stopColor="#6e6cff"/>
|
|
<stop offset="100%" stopColor="#b15bff"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="M3 20 L12 4 L21 20 Z" fill={`url(#${id})`}/>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
Object.assign(window, { Icon, icons, VibnMark });
|