// Icon system with multiple visual packs.
// content.jsx stores role keys (counsel, diagnosis, brand, ai, clarity, judgment, direction, outcome)
// and the active pack is selected via tweaks → IconPackContext.
const IconPackContext = React.createContext("lucide");
// Lucide-style line icons (24x24, currentColor, round caps).
const LUCIDE = {
counsel: ( // compass
<>
),
diagnosis: ( // search-check
<>
),
brand: ( // layers
<>
),
ai: ( // sparkles
<>
),
clarity: ( // eye
<>
),
judgment: ( // scale
<>
),
direction: ( // arrow-right
<>
),
outcome: ( // target
<>
),
};
// Solid / filled versions
const SOLID = {
counsel: (
<>
),
diagnosis: (
<>
),
brand: (
<>
),
ai: (
<>
),
clarity: (
<>
),
judgment: (
<>
),
direction: (
<>
),
outcome: (
<>
),
};
// Geometric / Bauhaus — pure abstract shapes, one form per role
const GEOMETRIC = {
counsel: ,
diagnosis: <>,
brand: ,
ai: ,
clarity: ,
judgment: <>,
direction: ,
outcome: ,
};
// Heavy stroke — same shapes as Lucide but strokeWidth 2.5
const HEAVY = LUCIDE; // shape data identical, strokeWidth controlled by pack config
// Roman numerals (text-based pack, rendered as text not SVG)
const ROMAN = {
counsel: "I",
diagnosis: "II",
brand: "III",
ai: "IV",
clarity: "·",
judgment: "‖",
direction: "→",
outcome: "◉",
};
// Alchemical Unicode glyphs (the original brand vibe)
const ALCHEMY = {
counsel: "☉",
diagnosis: "☿",
brand: "🜔",
ai: "🜂",
clarity: "◎",
judgment: "☩",
direction: "↗",
outcome: "⊕",
};
const ICON_PACKS = {
lucide: { kind: "svg", data: LUCIDE, strokeWidth: 1.5 },
solid: { kind: "svg", data: SOLID, strokeWidth: 0 },
heavy: { kind: "svg", data: HEAVY, strokeWidth: 2.5 },
geometric: { kind: "svg", data: GEOMETRIC, strokeWidth: 1.5 },
roman: { kind: "text", data: ROMAN, font: "var(--fa-serif)", italic: true },
alchemy: { kind: "text", data: ALCHEMY, font: "var(--fa-serif)", italic: false },
};
const ICON_PACK_LABELS = {
lucide: "Línea moderna",
solid: "Sólido",
heavy: "Trazo grueso",
geometric: "Geométrico",
roman: "Numeral romano",
alchemy: "Alquímico",
};
const Icon = ({ name, size = 36 }) => {
const packKey = React.useContext(IconPackContext) || "lucide";
const pack = ICON_PACKS[packKey] || ICON_PACKS.lucide;
const data = pack.data[name];
if (data === undefined) return {name};
if (pack.kind === "text") {
return (
{data}
);
}
return (
);
};
window.Icon = Icon;
window.IconPackContext = IconPackContext;
window.ICON_PACKS = ICON_PACKS;
window.ICON_PACK_LABELS = ICON_PACK_LABELS;