DocIcon

• Layer: Primitive / Icon library
• Base: Custom inline SVG

Part of the vault icon library. Icons are accent-coloured SVGs — stroke/fill driven by var(--accent) set on the parent container. Glow via CSS drop-shadow filter consuming var(--accent-rgb).

All Icons

One icon per supported type

diary

note

goal

worklog

follow-through

idea

observation

mentee

document

decision

research

Sizes

goal icon at 14 / 18 / 22 / 28 / 36 px

14px

18px

22px

28px

36px

Props

Prop	Type	Default	Description
typeId	string	required	Document type key — determines which icon is rendered
size	number	22	Width and height of the SVG in px

Supported Types

typeId	Icon	Description
"diary"	Ruled notebook	Ruled notebook with side bookmarks
"note"	Dog-eared page	Dog-eared sheet with two ruled lines
"goal"	Crosshair	Three concentric circles with cardinal tick marks
"worklog"	Briefcase	Briefcase with handle and two inner lines
"follow-through"	Arrow-through	Horizontal line piercing into a rightward chevron
"idea"	Lightbulb	Bulb silhouette with base, filament rays and filament lines
"observation"	Eye	Ellipse with inner pupil and lash accents
"mentee"	Person with check	Head and shoulders with a check mark beside them
"document"	Page with highlight	Tall page with ruled lines and a highlighted block
"decision"	Y-fork	Downward stem forking to two upper nodes from a lower node
"research"	Magnifier with plus	Magnifying glass with plus inside
any other	Dot	Filled circle fallback

Usage

import { DocIcon } from '@risingswamp/design-system'

// Inside a container that sets --accent and --accent-rgb:
<div style={{ "--accent": "#00e5c8", "--accent-rgb": "0,229,200" }}>
  <DocIcon typeId="goal" />
</div>

// Custom size:
<DocIcon typeId="diary" size={18} />

Design Notes

• The icon consumes var(--accent) from the nearest ancestor that defines it — no accent prop on the icon itself.
• Glow filter applied inline: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.7)) drop-shadow(0 0 11px rgba(var(--accent-rgb), 0.3)).
• Intended for use inside VaultCard, which sets --accent and --accent-rgb automatically based on typeId. Can be used standalone when the parent sets those variables.
• SVG viewBox is always 0 0 32 32 regardless of size — the size prop scales via width/height attributes only.