craftbits*

Category Illustrations

A larger sibling to BandIcon / CardKindIcon: an 80×80 line-art illustration set with soft, low-opacity fills layered on the strokes. Pass category="curries" (or any registered category name) and the matching SVG renders inline.

curries
street-food
drinks
sweets
quick-meals
Customize
Illustration set
curries
80px
accent

Installation

npx shadcn@latest add https://craftbits.dev/r/category-illustrations.json

Usage

import { CategoryIllustration } from "@craft-bits/core";
 
<CategoryIllustration category="curries" />
<CategoryIllustration category="drinks" size={64} accentColor="var(--cb-accent)" />

Iterate the full set when you need a category picker:

import { CATEGORY_NAMES, CategoryIllustration } from "@craft-bits/core";
 
{CATEGORY_NAMES.map((c) => (
  <CategoryIllustration key={c} category={c} />
))}

Understanding the component

  1. Single inline SVG. CategoryIllustration renders one <svg viewBox="0 0 80 80"> and dispatches on category. No per-illustration imports or bundle bloat from a file per category.
  2. accentColor prop, currentColor default. Every stroke and fill resolves to accentColor, which defaults to currentColor. Tint by setting text-cb-* on a parent or pass any CSS color string explicitly.
  3. Layered strokes and soft fills. Each illustration mixes 2–2.5px strokes (silhouette) with low-opacity fills (rim, garnish, liquid surface) so it reads as more than a flat outline at hero / category-card sizes.
  4. CATEGORY_ILLUSTRATIONS map for iteration. A static record baked at currentColor is exported for legends and sidebars that iterate the set without re-listing names.

Variants / Examples

// Tint via parent color.
<span className="text-cb-accent">
  <CategoryIllustration category="sweets" size={96} />
</span>
 
// Pass an explicit accent color (e.g. when nesting inside a non-tinted parent).
<CategoryIllustration category="quick-meals" accentColor="oklch(0.7 0.2 50)" />

Props

PropTypeDefaultDescription
category'curries' | 'street-food' | 'drinks' | 'sweets' | 'quick-meals'requiredWhich illustration to render.
sizenumber80Pixel width / height.
accentColorstring'currentColor'CSS color applied to every stroke and fill inside the illustration.
classNamestring—Extra classes merged onto the root SVG.

Accessibility

  • Each illustration is decorative (aria-hidden="true") by default. If the glyph carries meaning on its own, pair it with a visible text label or override with aria-label and aria-hidden={false} on the consuming element.
  • Default fill is none and strokes use accentColor (which defaults to currentColor), so contrast tracks the parent text color and inherits any prefers-contrast overrides applied site-wide.
  • No motion. Reduced-motion users see the same static illustration.

Credits

  • Extracted from: terminal-dreams (src/components/cookbook/CategoryIllustrations.tsx).