Graphic

Props

Prop	Type	Default	Description
name	CatnipIllustrationName	products/eid-hub	Key into the illustration map: path under illustrations/ without .svg. Must match a value from illustrationNames in @signicat/catnip-assets/illustrations/svg. See Asset keys.
width	number	0	Width in CSS pixels. 0 means “derive from viewBox / height”.
height	number	0	Height in CSS pixels. 0 means “derive from viewBox / width”.
graphicAriaLabel	string	""	If non-empty, the SVG is exposed as an image with this label. Leave empty for decorative graphics.
testSelectors	TestSelectorsProp	(see Test Selectors)	Overrides stable data-test values.

See Component API — Props.

Asset keys

• The canonical list is illustrationNames, exported from @signicat/catnip-assets/illustrations/svg. Run pnpm build in @signicat/catnip-assets after adding or renaming SVGs.
• A key is always illustrations/<path> without .svg: for example products/eid-hub, hero/onboarding, signicat-logos/signicat, pictograms/open-banking.
• Previous keys for heroes that are still in the set still load the current file (hero/onboarding-signicat resolves to hero/onboarding, hero/404-error to hero/error-404). Removed heroes do not resolve. Those aliases are not listed in illustrationNames.

More detail: Graphics (assets) — browse Pictograms, Product logos, and Hero illustrations.

Sizing

width	height	Result
> 0	> 0	Fixed box (may stretch if aspect ratio ≠ viewBox).
> 0	0	Width fixed; height from viewBox ratio.
0	> 0	Height fixed; width from viewBox ratio.
0	0	Uses viewBox width and height as pixel dimensions.

The viewBox of every asset ships with the loader (illustrationViewBoxes), so the size is reserved before the SVG loads. A catnip-skeleton covers that box until the artwork arrives.

Colors

Product and pictogram SVGs use var(--catnip-graphic-primary, …) for primary line art and var(--catnip-graphic-accent, #41FFD1) for accent fills. Hero SVGs use --catnip-hero-primary, --catnip-hero-accent, and --catnip-hero-stroke instead. Those resolve from component tokens on :root (Signicat Brand 900 purple by default) — see Component tokens:

Token	Default (:root)	Role
--catnip-graphic-primary	var(--catnip-color-brand-900) (#2A0062)	Primary fills / strokes
--catnip-graphic-accent	var(--catnip-color-accent-300) (#41FFD1)	Accent fills in SVG

Override the same variables on the host (or an ancestor) for a one-off. Inside the shadow tree, --catnip-pictogram-accent aliases --catnip-graphic-accent so older SVG hooks still work.

For light/dark or whitelabel, override the component tokens (or host variables). EndUI remaps color.brand.* (so --catnip-graphic-primary follows) and --catnip-color-accent-300 to Steel 200 (so --catnip-graphic-accent follows). There is no separate dark asset per illustration.

Test selectors

Attribute	Default
root	catnip-graphic

See Component API — Test selectors.

Slots

None.

See Component API — Slots.