// Albanna Conwood — custom hairline SVG icons (luxe, editorial)
const Icon = ({ name, size = 28, stroke = 1.25, className = "", color = "currentColor" }) => {
const s = size;
const cx = 12, cy = 12;
const common = {
width: s, height: s, viewBox: "0 0 24 24",
fill: "none", stroke: color, strokeWidth: stroke,
strokeLinecap: "round", strokeLinejoin: "round",
className: `icon icon--${name} ${className}`, "aria-hidden": "true",
};
// Most icons sit inside a hairline circle frame for a coin-medallion feel
const Frame = () => ;
switch (name) {
case "phone":
return (
);
case "whatsapp":
// Actual WhatsApp glyph — solid, brand-recognisable
return (
);
case "mail":
return (
);
case "pin":
return (
);
// Disciplines
case "structure":
// Column / classical pillar — capital, shaft with flutes, base
return (
);
case "finish":
// Trowel / mason — diamond blade with handle
return (
);
case "mep":
// Compass / dividers — engineer's tool
return (
);
case "joinery":
// Cross-cut joinery — interlocking lines (dovetail mark)
return (
);
// Values
case "heritage":
// Two overlapping rings — generations
return (
);
case "precision":
// Plumb-line
return (
);
case "excellence":
// Tiny rosette / 4-point compass star
return (
);
case "ownership":
// Single seal — circle with monogram-bar
return (
);
case "knowhow":
// Drafting dividers — two legs from a pivot, with a small arc
return (
);
case "balance":
// Scales — fairness
return (
);
case "speed":
// Forward chevrons — speed
return (
);
case "navigate":
return (
);
// Misc
case "arrow":
return (
);
case "rosette":
// Mini-rosette glyph
return (
);
case "key":
// Handover — bow + shaft + teeth
return (
);
case "document":
// Written record — page with folded corner + lines
return (
);
case "stamp":
// Sign-off / approval — seal with check + base
return (
);
case "camera":
// Progress photos — body, hump, lens
return (
);
case "flag":
// Early warning — pennant on a pole
return (
);
case "verify":
// Quality check — tick in the medallion
return (
);
case "manage":
// Project management — clipboard checklist
return (
);
case "villa":
// The outcome — a single home / roof
return (
);
default:
return ;
}
};
window.Icon = Icon;