// Wing Gal — Collage Icon System (hand-cut composite SVG illustrations)
// 16 icons + the Star4 "twinkle" sticker. Self-contained: palette baked in.
// Usage:
// Icon names: wing, bow, martini, rose, disco, heel, lipstick, heartKey,
// phone, suitcase, skyline, chatBubbles, hands, eye, sparkles, shieldRose
const TOKENS = {
bubbleGum: "#F8AFB8", peachesAndCream: "#F5CBAF", dirtyMartini: "#5D5821",
negroni: "#FE4213", spritz: "#F09457", sand: "#D6CBB6", velvet: "#B9A7AC",
ink: "#3A3520", bone: "#FAEAD8",
};
function CollageIcon({ name, size = 64, rotate = 0 }) {
const icons = {
// ✦ Going out / nightlife
martini: (
{/* glass cone */}
{/* olive on toothpick */}
{/* stem */}
{/* base */}
{/* surface squiggle */}
{/* sticker star */}
),
// ✦ Solo travel
suitcase: (
{/* handle */}
{/* body */}
{/* horizontal stripe */}
{/* tag */}
{/* sticker */}
),
// ✦ New city / skyline
skyline: (
{/* buildings */}
{/* windows */}
{/* moon sticker */}
),
// ✦ Heart with key (post-breakup, opening up)
heartKey: (
{/* heart */}
{/* keyhole */}
{/* key dangling on string */}
{/* sticker */}
),
// ✦ Conversation / company
chatBubbles: (
{/* back bubble */}
{/* front bubble */}
{/* dots in front bubble */}
{/* sticker */}
),
// ✦ Rose (sisterhood, the brand bouquet)
rose: (
{/* stem */}
{/* leaf */}
{/* outer petals */}
{/* inner spirals */}
{/* sticker */}
),
// ✦ Phone (booking the gal)
phone: (
{/* receiver */}
{/* curly cord */}
{/* sticker */}
{/* small star */}
),
// ✦ Disco ball (going out)
disco: (
{/* ball */}
{/* facets */}
{/* highlight squares */}
{/* hanger */}
{/* sparkles */}
),
// ✦ Heel (getting ready)
heel: (
{/* shoe sole */}
{/* heel */}
{/* opening curve */}
{/* sticker */}
),
// ✦ Lipstick kiss
lipstick: (
{/* tube */}
{/* tube band */}
{/* bullet */}
{/* kiss mark */}
{/* star */}
),
// ✦ Wing (the brand mark — sisterhood, having backup)
wing: (
{/* main wing arc — outer silhouette */}
{/* primary feathers (top row, longest) */}
{/* secondary feather details — center vein lines */}
{/* lower fluff feathers (rounded scallops) */}
{/* sticker stars — twinkles in the air around the wing */}
),
// ✦ Bow (getting ready, the gift, soft femme)
bow: (
{/* left ribbon loop */}
{/* right ribbon loop */}
{/* loop inner shadows / fold lines */}
{/* center knot */}
{/* knot crease */}
{/* left trailing tail */}
{/* right trailing tail */}
{/* tail tips (notched V) */}
{/* sticker star */}
),
// ✦ Hand-holding (kept as alt for sisterhood-specific moments)
hands: (
{/* left hand (peach) */}
{/* right hand (bubble gum) */}
{/* clasp star */}
),
// ✦ Eye (being seen / being there)
eye: (
{/* almond */}
{/* iris */}
{/* highlight */}
{/* lashes */}
{/* tear-star */}
),
// ✦ Sparkle constellation (general magic)
sparkles: (
),
// ✦ Shield with rose (safety)
shieldRose: (
{/* shield */}
{/* small rose center */}
{/* rays */}
{/* sticker */}
),
};
return (
);
}
// 4-pointed sticker star (Chani signature). Pinched-x shape, not pointy-5-star.
function Star4({ cx, cy, r, fill, stroke = "#3A3520", sw = 1.2 }) {
// Pinch creates the iconic "twinkle" look
const p = r * 0.42;
const path = `M ${cx} ${cy - r} Q ${cx + p} ${cy - p} ${cx + r} ${cy} Q ${cx + p} ${cy + p} ${cx} ${cy + r} Q ${cx - p} ${cy + p} ${cx - r} ${cy} Q ${cx - p} ${cy - p} ${cx} ${cy - r} Z`;
return ;
}
// Expose globally for cross-file Babel scripts
window.CollageIcon = CollageIcon;
window.Star4 = Star4;