Graphic

catnip-graphic renders SVGs from @signicat/catnip-assets. One component covers product marks, hero art, Signicat logos, pictograms (illustrations/pictograms/), and anything else under the single illustrations/ source tree.

Assets are not split into light/dark files. How they look comes from design tokens and CSS variables in the SVG and from what you set on the host.

Graphic galleries

• Hero illustrations
• Pictograms
• Product logos

Asset keys and folder structure: Graphics (assets).

Register

import "@signicat/catnip-components";

Usage

<catnip-graphic name="products/eid-hub"></catnip-graphic>
<catnip-graphic name="pictograms/folder" width="64" height="64"></catnip-graphic>
<catnip-graphic name="signicat-logos/signicat" width="120" height="0" graphic-aria-label="Signicat"></catnip-graphic>

Optional inline styling for colors (defaults apply if you omit them):

<catnip-graphic
  name="products/mint"
  width="80"
  height="80"
  style="--catnip-graphic-primary: var(--your-text-token); --catnip-graphic-accent: var(--your-accent-token);"
></catnip-graphic>

Defaults come from component tokens --catnip-graphic-primary and --catnip-graphic-accent (see Component tokens).

Loading

Each graphic is downloaded the first time its name is used, then reused by every catnip-graphic on the page. Its size is known up front, so the box is reserved and a catnip-skeleton shows until the artwork arrives. Preload graphics visible on first load with preloadGraphics([...]) — see Installation — Icons and graphics loading.

Raw SVG in JavaScript

Outside the component, use the same map the component uses:

import { loadIllustration, illustrationNames, illustrationViewBoxes } from "@signicat/catnip-assets/illustrations/svg";

await loadIllustration("products/eid-hub");
illustrationViewBoxes["products/eid-hub"]; // root viewBox, available before the chunk loads

• loadIllustration(name) — name must be an asset key; unknown keys resolve to an empty string.
• illustrationNames — all keys, sorted.
• illustrationViewBoxes — root viewBox per key (aliases included), for reserving space before the SVG loads.

Chunks are emitted under dist/illustration-chunks/** after build. You can also reference dist/illustrations/**/\*.svg directly if your bundler resolves package paths to files on disk.

Accessibility

• Decorative: omit graphicAriaLabel (the SVG is aria-hidden).
• Meaningful: set aria-label via the graphicAriaLabel prop.

Same idea as Icon.