Assets
All design system assets live in @signicat/catnip-assets. Install with:
bash
npm install @signicat/catnip-assetsCDN
Static files are served from the CDN under assets/{version|latest}/:
https://static.signicat.com/catnip/assets/latest/fonts/inter/Inter-VariableFont_opsz,wght.ttf
https://static.signicat.com/catnip/assets/latest/illustrations/…See Installation — CDN.
Overview
| Asset | Description | Link |
|---|---|---|
| Icons | UI icons for actions, status, navigation (also packaged as @signicat/catnip-icons) | Icons |
| Illustrations | Single illustrations/ tree: products/, pictograms/ (square concepts), hero/, signicat-logos/, etc. Kebab-case keys; same SVG for light/dark — use tokens in markup | Illustrations |
| Logos (SVG) | Signicat marks under illustrations/signicat-logos/ (also in dist/ after build) | Illustrations |
| Country Flags | SVG flags with country metadata (dial codes, timezones) | Flags |
| Fonts | Inter variable font (weights 100–900) | Fonts |
| Favicons | App icons and favicons | In package: favicons/ |
Build output
Running pnpm build in @signicat/catnip-assets copies src/ to dist/ and generates JavaScript SVG maps for Catnip components:
| Export | Contents |
|---|---|
@signicat/catnip-assets/illustrations/svg | loadIllustration(name), illustrationNames — lazy chunks under dist/illustration-chunks/** |
Use catnip-graphic in apps for illustrations and pictograms (name like pictograms/folder). Use loadIllustration when you need raw SVG strings outside the component.
Static files remain addressable under dist/ (e.g. fonts, flags, individual SVG paths via ./dist/... or your bundler’s resolution rules).