Graphic

Props

Prop	Type	Default	Description
name	string	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”.
ariaLabel	string	""	If non-empty, the SVG is exposed as an image with this label. Leave empty for decorative graphics.
testSelectors	object	(see Test Selectors)	Overrides for data-test attributes.

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, signicat-logos/signicat, pictograms/open-banking.

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.

Colors

Hero / product / pictogram SVGs use var(--catnip-graphic-primary, …) for primary line art and var(--catnip-graphic-accent, #41FFD1) for accent fills. 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-green-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 sets --catnip-graphic-accent to Steel 50. 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.