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"
  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).

Raw SVG in JavaScript

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

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

await loadIllustration("products/eid-hub");

• loadIllustration(name) — name must be an asset key; unknown keys resolve to an empty string.
• illustrationNames — all keys, sorted.

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 ariaLabel (the SVG is aria-hidden).
• Meaningful: set aria-label via the ariaLabel prop.

Same idea as Icon.