Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/spooky-developer/llms.txt

Use this file to discover all available pages before exploring further.

SpookyIcons.js exports five lightweight inline-SVG React components that are used throughout the Spooky Developer UI. Every icon is built from a single <path> on a 24 × 24 viewBox with fill="currentColor", meaning size is controlled entirely by Tailwind width/height utilities and colour by text-* utilities (or the CSS color property). There are no external image assets, no sprite sheets, and no icon font to load.

​
Installation / import

The icons are co-located in components/icons/SpookyIcons.js. Import only what you need: 
import { GhostIcon, BatIcon, SpiderIcon, PumpkinIcon, CandyIcon }
  from './components/icons/SpookyIcons';
The compiled/minified build exports these components with single-letter names (G, B, S, P, C). When working directly from the source file — or importing into other source modules — use the full descriptive names shown above. The single-letter aliases are a bundler artefact and should not be relied upon in application code.

​
Icon reference

All five icons share the same prop signature: 
interface SpookyIconProps extends React.SVGProps<SVGSVGElement> {
  className?: string; // default: 'w-6 h-6'
}
Any additional prop you pass is spread onto the underlying <svg> element.
ExportShape descriptionDefault classNameUsed in
GhostIconClassic rounded ghost body with a scalloped hem and two circular eye cutoutsw-6 h-6CursorTrail, IdleGhost
BatIconBat in flight — two outstretched wings meeting at a central body with a small headw-6 h-6General decoration
SpiderIconRound spider body with eight segmented legs radiating outward and two small eye dotsw-6 h-6SpiderScare
PumpkinIconJack-o’-lantern pumpkin with triangular eyes and a toothy grin, plus a short stemw-6 h-6General decoration
CandyIconWrapped candy / sweet shape with a diagonal twistw-6 h-6General decoration

​
Usage examples

import { GhostIcon, BatIcon, SpiderIcon, PumpkinIcon, CandyIcon }
  from './components/icons/SpookyIcons';

// Size via className, colour via Tailwind text utility
<GhostIcon className="w-12 h-12 text-haunt-moon" />
<SpiderIcon className="w-8 h-8 text-haunt-pumpkin" />
<BatIcon className="w-6 h-6" />          {/* inherits parent color */}
<PumpkinIcon className="w-10 h-10 text-orange-400" />
<CandyIcon className="w-6 h-6 text-pink-400" />
Because all icons use fill="currentColor", you can animate their colour with a Tailwind transition or a Framer Motion animate on the parent element’s color property without touching the SVG at all.

​
SVG technical details

PropertyValue
viewBox0 0 24 24
fillcurrentColor
Path count1 per icon
External dependenciesNone
Accessible labelNone built-in — add aria-label or wrap in a <span aria-hidden="true"> as needed
These icons have no built-in aria-label or role attribute. When using them as meaningful content (e.g. a button with only an icon), pass aria-label="..." and role="img" as props. When they are purely decorative, add aria-hidden="true".

​
Sizing reference

The 24 × 24 viewBox maps cleanly to common Tailwind size utilities:
Tailwind classRendered size
w-4 h-416 × 16 px (cursor trail ghosts)
w-6 h-624 × 24 px (default)
w-8 h-832 × 32 px
w-16 h-1664 × 64 px (SpiderScare spider)
w-24 h-2496 × 96 px (IdleGhost ghost)

Build docs developers (and LLMs) love

Get started for freeTalk to us