Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/nightshade/llms.txt

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

Sigils are the nine custom SVG icon components that represent each route in the Nightshade navigation bar. Each sigil is a minimal, occult-inflected linework icon — circles, triangles, diamonds, grids, and glyphs — rendered as a stroked SVG that inherits its color from the parent element.

​
Shared prop signature

All nine sigil components accept the same props: 
interface SigilProps {
  size?: number;      // default 24 — sets both width and height
  className?: string; // additional CSS classes
  [key: string]: any; // any additional props are spread onto the <svg> element
}
All sigils use stroke="currentColor" strokeWidth="1.5" fill="none". This means color is entirely controlled by the parent element’s CSS color property — no fill or stroke color is hardcoded.

​
The nine sigils

SanctumIcon

Route: /
A large outer circle with a horizontal and vertical crosshair, and a smaller inner circle at the center.

WitchIcon

Route: /about
A globe circle with a vertical centerline and an upward-pointing arrow chevron.

SummoningsIcon

Route: /projects
An upward-pointing triangle with a small circle (eye) inside and a vertical line dropping from the apex.

ArcanaIcon

Route: /skills
A rotated square (diamond) with a small inner circle and short crosshair lines extending from each point.

PactsIcon

Route: /work
A rounded rectangle divided into four quadrants by a horizontal and vertical line — a grid or table shape.

WorkingsIcon

Route: /case-studies
A large circle with a vertical and horizontal crosshair and a small inner circle at the center — an orb or globe glyph.

JournalIcon

Route: /blog
An open book with a curved spine and two ruled lines on the right page — a journal or notebook glyph.

WhispersIcon

Route: /testimonials
A speech bubble rectangle with a tail and three filled circles inside representing dots or words.

CommuneIcon

Route: /contact
A paper plane: a diagonal stroke from top-right to center-left and a filled triangular body.

​
Exports reference

ExportInternal nameRoute
SanctumIconS (export alias)/
WitchIcona/about
SummoningsIconb/projects
ArcanaIconc/skills
PactsIcond/work
WorkingsIcone/case-studies
JournalIconf/blog
WhispersIcong/testimonials
CommuneIconh/contact

​
Active state

Sigils have no awareness of the active route themselves. The Navigation component wraps each icon in an element and conditionally applies the active style when location.pathname matches the sigil’s route: 
// Applied by Navigation to the icon wrapper when the route is active
className="text-witch-amber drop-shadow-[0_0_5px_rgba(245,158,11,0.5)]"

// Applied when inactive
className="text-witch-moonlight/60"
Because the sigils use stroke="currentColor", switching the wrapper’s text color from moonlight to amber automatically recolors the icon stroke. The drop shadow creates the amber glow around the active sigil.

​
Usage example

import { SanctumIcon, WitchIcon, ArcanaIcon } from "./components/Sigils";

// Standard navigation use — size 24, color inherited
<SanctumIcon />

// Larger icon with explicit amber color
<SanctumIcon size={28} className="text-witch-amber" />

// Standard 32px witch icon
<WitchIcon size={32} />

// Arcana icon with muted opacity
<ArcanaIcon size={20} className="text-witch-moonlight/60" />

​
Adding a custom sigil

To add a new sigil for a new route:
  1. Create a new functional component in Sigils.js following the shared pattern:
export const GrimoireIcon = ({ size = 24, className = "", ...props }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.5"
    className={className}
    {...props}
  >
    {/* Your SVG paths here */}
    <path d="M4 4h16v16H4z" />
    <path d="M12 4v16M4 12h16" />
  </svg>
);
  1. Import the new component in Navigation.js and add an entry to navItems:
import { GrimoireIcon } from "./Sigils";

// Inside navItems array:
{ path: "/grimoire", label: "Grimoire", icon: GrimoireIcon, incantation: "Veritas Occulta" }
Keep sigil designs at a consistent visual weight — strokeWidth="1.5" on a 24×24 viewBox is the established standard. Heavier strokes will look out of place against the existing nine icons in the navigation bar.

Build docs developers (and LLMs) love

Get started for freeTalk to us