// Icon set — stroked SVGs, 1.6 stroke, 24x24 viewBox, currentColor.
// Style: lucide-ish but slightly softer corners, designed for a friendly
// small-business product. Single Icon component, name-keyed.
const HK_ICON_PATHS = {
// ── core nav ─────────────────────────────────────────────────
dashboard: <>,
ticket: <>,
chat: <>,
ai: <>,
report: <>,
store: <>,
calc: <>,
referral: <>,
account: <>,
// ── services ────────────────────────────────────────────────
site: <>,
seo: <>,
smm: <>,
ads: <>,
auto: <>,
design: <>,
dev: <>,
content:<>,
hosting:<>,
// ── ui glyphs ───────────────────────────────────────────────
search: <>,
bell: <>,
plus: <>,
minus: <>,
chev: <>,
chevR: <>,
chevL: <>,
chevUp: <>,
close: <>,
arrow: <>,
arrowUp: <>,
arrowDn: <>,
check: <>,
dot3: <>,
filter: <>,
upload: <>,
download:<>,
send: <>,
paperclip:<>,
globe: <>,
star: <>,
link: <>,
external:<>,
logout: <>,
sun: <>,
moon: <>,
menu: <>,
pulse: <>,
team: <>,
messages:<>,
read: <>,
spark: <>,
copy: <>,
info: <>,
flame: <>,
trending:<>,
trendingDn:<>,
hash: <>,
calendar:<>,
clock: <>,
rocket: <>,
zap: <>,
shield: <>,
eye: <>,
pin: <>,
drag: <>,
trash: <>,
sliders: <>,
refresh: <>,
bolt: <>,
// money
dollar: <>,
receipt: <>,
card: <>,
channels: { ig: 'instagram', tt: 'tiktok', fb: 'facebook', li: 'linkedin' },
// socials simplified
instagram:<>,
facebook: <>,
tiktok: <>,
linkedin: <>,
google: <>,
meta: <>,
};
function Icon({ name, size = 18, strokeWidth = 1.6, style, className }) {
const path = HK_ICON_PATHS[name];
if (!path) {
// fallback to a tiny square so missing icons are visible during dev
return (
);
}
return (
);
}
// HiKit wordmark — combines logo glyph + name. Used in sidebar header and
// signed-out states. The glyph is a stylized "HK" monogram in a rounded
// square with HiKit's signature yellow dot.
function Wordmark({ size = 20, hideText }) {
return (
{!hideText && HiKit}
);
}
window.Icon = Icon;
window.Wordmark = Wordmark;