Graphics
SVG illustrations in @signicat/catnip-assets live under a single source tree: src/illustrations/. There are no parallel light/ and dark/ trees — one file per graphic.
Folder structure
| Folder | Role | Example key |
|---|---|---|
products/ | Product / offering marks | products/eid-hub |
pictograms/ | Square concept artwork | pictograms/folder |
hero/ | Large hero / campaign art | hero/onboarding-signicat |
signicat-logos/ | Brand wordmarks | signicat-logos/signicat |
Other subfolders are allowed; the rules below apply everywhere under illustrations/.
Map keys
After pnpm build, each SVG becomes one lazy chunk. The key (and the name on catnip-graphic) is:
- Path under
illustrations/, without the.svgsuffix - Always use forward slashes (e.g.
products/eid-hub, not a filesystem-specific separator)
Add or rename files under packages/assets/src/illustrations/, then rebuild the assets package so keys and types stay in sync.
File naming
Use lowercase and kebab-case for multi-word filenames (electronic-signature-portal.svg, not ElectronicSignaturePortal.svg). That keeps keys predictable and aligned with the rest of Catnip assets.
Browse
Source tree: packages/assets/src/illustrations/
- For rendering in your app: Graphic component