Migration from Prime Assets to Catnip Assets

This guide helps you migrate from Prime Assets (CDN-hosted at static.signicat.com/prime-assets, static.signicat.dev/prime-assets) to @signicat/catnip-assets and related Catnip packages.

Overview

Prime (CDN)	Catnip (npm)	Notes
prime-assets/styles-latest.css	@signicat/catnip-css	Full CSS — see Migration from Prime CSS
prime-assets/signicat-icons/…	@signicat/catnip-icons	Icon webfont + SVG
prime-assets/ illustrations, flags, fonts	@signicat/catnip-assets	Illustrations, flags, fonts
icon--signicat-{name}	catnip-icon--{name} or <catnip-icon>	Icon usage

Migration Steps

1. Replace Dependencies

# Prime Assets are typically loaded via CDN — no npm package to uninstall.
# Add Catnip packages:

npm install @signicat/catnip-assets
npm install @signicat/catnip-icons    # for icons
npm install @signicat/catnip-css       # if replacing Prime styles

2. Icons

Before (Prime — CDN):

<link href="https://static.signicat.com/prime-assets/signicat-icons/signicat-icons-latest/signicat-icons.min.css" rel="stylesheet" />

<i class="icon icon--signicat-user"></i>
<i class="icon icon--signicat-activity"></i>

After (Catnip — npm):

@import "@signicat/catnip-icons";

<!-- Font-based -->
<i class="catnip-icon--user"></i>
<i class="catnip-icon--activity"></i>

Or use the Icon component (recommended):

<catnip-icon name="user" size="24"></catnip-icon>
<catnip-icon name="activity" size="24"></catnip-icon>

Icon names in Catnip use kebab-case and may differ from Prime. Check Icons and @signicat/catnip-icons for the full set.

3. Illustrations

Before (Prime — CDN):

<img src="https://static.signicat.com/prime-assets/illustrations/whoooa-illustrations/contact_solid.svg" alt="Contact" />

After (Catnip — npm import):

import illustrationUrl from "@signicat/catnip-assets/illustrations/whoooa-illustrations/contact_solid.svg";

<img :src="illustrationUrl" alt="Contact" />

Or with a bundler that resolves URLs:

<img src="@signicat/catnip-assets/illustrations/whoooa-illustrations/contact_solid.svg" alt="Contact" />

See Graphics (assets).

4. Country Flags

Before (Prime — CDN):

<img src="https://static.signicat.com/prime-assets/countries/flags/NO.svg" alt="Norway" />

After (Catnip — npm):

import flagUrl from "@signicat/catnip-assets/countries/flags/NO.svg";

<img :src="flagUrl" alt="Norway" width="24" height="24" />

Country metadata (dial codes, timezones) is available from:

import countries from "@signicat/catnip-assets/countries/index.js";
const norway = countries.find((c) => c.code === "NO");

See Country Flags.

5. Fonts

Before (Prime): Fonts were served from Prime CDN (e.g. Inter).

After (Catnip): Fonts are in @signicat/catnip-assets/fonts/. @signicat/catnip-css includes Inter by default. For custom font setup, see Fonts.

6. Product Logos and Pictograms

Prime had product logos and pictograms under prime-assets. Catnip provides these in @signicat/catnip-assets:

• @signicat/catnip-assets/illustrations/ — Whoooa illustrations, pictograms, product logos, EID logos
• Paths and filenames may differ; check the package structure when migrating.

7. Update CDN References

Search your codebase for:

• static.signicat.com/prime-assets
• static.signicat.dev/prime-assets
• static.qa.signicat.dev/prime-assets

Replace with @signicat/catnip-assets imports or the appropriate Catnip package (@signicat/catnip-icons, @signicat/catnip-css).

Need Help?

• Assets Overview — Catnip assets docs
• Icons — icon usage
• Graphic component — graphic usage
• Country Flags — flag usage and metadata
• Fonts — font setup
• Migration from Prime CSS — for styles migration