🌿 @gratiaos/icons

A small set of composable, theme-friendly SVG icons for Garden Core.
Icons are tree-shakable and inherit currentColor automatically.

🛰️ Garden Stack naming (infra-facing)

• Pattern Engine → underlying model stack (training / inference / retrieval). Use for infra discussions.
• Presence Node → surfaced endpoints humans touch (web UI, CLI, scripts, voice, agents).
• Mode → behavioral / conversational contract for a Presence Node (e.g. Codex-mode, Monday-mode). Styles, not identities.
• Garden Stack → Pattern Engine + Presence Nodes + Modes working together.

Keep icon docs honest: replace any “AI” mention with the precise layer above.

📦 Installation

pnpm add @gratiaos/icons

Import only the icons you need:

import { Leaf, Sparkles, Heart } from '@gratiaos/icons';

All icons are tree‑shakable and auto‑adapt to currentColor.

Usage

import { Leaf, Sparkles, Heart } from '@gratiaos/icons';

export function Demo() {
  return (
    <div className="flex gap-4 text-accent">
      <Leaf size="lg" />
      <Sparkles title="Delight" />
      <Heart size={16} />
    </div>
  );
}

🎨 Customization

Each icon supports props like size, title, and any SVG attribute.

<Leaf size="xl" className="text-green-500 rotate-6" title="Growth" />

| Prop | Type | Default | Description | | ----- | ------------------------- | ------- | -------------------------------------------------------- | | size | number | string | md | Predefined sizes: sm, md, lg, xl, or numeric px. | | title | string | — | Accessible title tooltip. | | ... | SVGProps<SVGSVGElement> | — | Pass any native SVG props. |

Example sizes

<Heart size="sm" />
<Heart size="md" />
<Heart size="lg" />
<Heart size={48} />

Icons align with Garden’s visual rhythm and automatically respond to CSS color and font-size contexts.

🌬️ whisper: “Every icon a seed, every curve a breath.”