/* Fyscal Website UI Kit — icons.
Semantic icons render the official Fyscal BRAND icon set (two-tone SVGs in
assets/icons/). Directional / UI glyphs (arrows, chevrons, close, check,
hamburger, dots) stay as inline strokes so they tint and rotate. */
const SIcon = ({ size = 24, sw = 1.75, children, fill = 'none', ...rest }) => (
);
/* Brand-icon factory: renders assets/icons/icon-NN.svg. Auto-inverts to white
when a light color is requested via stroke/color (for dark/coloured panels). */
const BIcon = (num) => {
const id = String(num).padStart(2, '0');
return ({ size = 24, stroke, color, style, sw, fill, ...rest }) => {
const c = String(stroke || color || '');
const light = /#fff\b|#ffffff|white|255,\s*255,\s*255|rgba\(\s*255/i.test(c);
return (
![]({"assets/icons/icon-")
);
};
};
const SIcons = {
/* ── Brand icons (official Fyscal set) ── */
bolt: BIcon(29), // lightning — speed / rapid deployment
shield: BIcon(21), // shield check — compliance / security
globe: BIcon(57), // globe — scale / global
card: BIcon(13), // card — digital banking / payments
swap: BIcon(30), // exchange arrows — integration / flexibility
chart: BIcon(24), // growth chart — growth / scale
lock: BIcon(22), // lock — privacy / AML
users: BIcon(43), // people — team / customers
api: BIcon(65), // code brackets — API / integration
star: BIcon(56), // star — featured / differentiation
home: BIcon(47), // house — banks / home
refresh: BIcon(53), // wrench/support — managed services / always-on
grid: BIcon(41), // layers — modular / composable
mail: BIcon(61), // message — get in touch
calendar:BIcon(45), // time — book a call
phone: BIcon(50), // support
doc: BIcon(51), // document
gear: BIcon(53), // settings / ops
bell: BIcon(61), // notifications
/* ── UI / directional glyphs (inline strokes) ── */
check: (p) => ,
arrowR: (p) => ,
menu: (p) => ,
x: (p) => ,
chevD: (p) => ,
chevR: (p) => ,
naira: (p) => ,
filter: (p) => ,
sort: (p) => ,
play: (p) => ,
drag: (p) => ,
dots: (p) => ,
};
/* Real Fyscal logo (blue F mark + wordmark). variant: 'blue' | 'white' (full knockout) */
const FyscalLogo = ({ height = 24, variant = 'blue' }) => {
const wordFill = variant === 'white' ? '#ffffff' : '#000000';
const markFill = variant === 'white' ? '#ffffff' : '#352EFF';
return (
);
};
Object.assign(window, { SIcon, SIcons, FyscalLogo });