2.0.55 • Published 3 weeks ago

@digital-ai/dot-illustrations

Licence

SEE LICENSE IN <LICENSE.md>

Version

2.0.55

Deps

Size

3.4 MB

Vulns

Weekly

Summary Dependency Versions

dot-illustrations

Central asset library for Digital.ai UX — illustrations and integration logos for use in products and documentation.

Browse the demo →

Asset types
Browse the demo
Using illustrations
Using integration logos
Using task icons
Adding a new illustration or integration logo
- Option A — Upload via demo UI (recommended)
- Option B — Manual contribution
Troubleshooting

Asset types

Type	Folder	Themes	React component
Illustrations	`illustrations/light/` + `illustrations/dark/`	Light + Dark	`DotIllustration`
Integration logos	`integrations/`	Single (no dark variant)	`DotIllustration`
Task icons	`tasks/`	Single (no dark variant)	`DotIllustration`

Integration logos and task icons are DotIllustration, not a separate icon component — same component as Illustrations, just backed by a single-theme SVG instead of a light/dark pair. Task icons are new (S-135988) — fixed-color pipeline/workflow badge icons sourced from the dot atomic library (Figma node 27123-30795). 13 of the node's 15 icons are in scope (2 are excluded as AI-styled). SVGs are in place. See tasks/README.md for status.

Browse the demo

https://digital-ai.github.io/dot-illustrations/demo/

The demo lets you:

Browse 72 illustrations (Global and Dashboards), 113 integration logos, and task icons (Tasks section — inventory pending, see above)
Switch between Illustrations, Integrations, and Tasks using the section switcher next to the search bar
Search with fuzzy autocomplete across both sections
Filter illustrations by A–Z (integrations only — 113 logos benefit from alphabet navigation)
Click any card to open a detail modal with the copy-ready code snippet
Star items to save them in your Favourites (persisted in your browser)
Upload a new illustration or integration logo directly from the browser

Using illustrations

React — `DotIllustration` via `dot-components`

import { DotIllustration } from '@digital-ai/dot-components';

// Light (default)
<DotIllustration illustrationId="empty" />

// Dark
<DotIllustration illustrationId="done" theme="dark" />

// With tooltip
<DotIllustration illustrationId="features" tooltip="See all features" />

Full DotIllustration documentation →

Standard HTML

<link rel="stylesheet" href="./index.css" />

<!-- Light theme -->
<span class="dot-illustration">
  <img class="done light" />
</span>

<!-- Dark theme -->
<span class="dot-illustration">
  <img class="done dark" />
</span>

Always set an explicit width and height — the library has no built-in sizing defaults.

Using integration logos

React — `DotIllustration` via `dot-components`

import { DotIllustration } from '@digital-ai/dot-components';

<DotIllustration illustrationId="jenkins" ariaLabel="Jenkins" />

Same component as illustrations — integration logos are just backed by a single-theme SVG in integrations/ instead of a light/dark pair in illustrations/.

Standard HTML

<link rel="stylesheet" href="./index.css" />

<span class="dot-integration">
  <img class="jenkins" />
</span>

Integration logos are single-theme only — they have no dark variant.

Using task icons

React — `DotIllustration` via `dot-components`

import { DotIllustration } from '@digital-ai/dot-components';

<DotIllustration illustrationId="task-manual" ariaLabel="Manual task" />

Same component as illustrations and integration logos — task icons are just backed by a single-theme SVG in tasks/ instead of a light/dark pair.

Standard HTML

<link rel="stylesheet" href="./index.css" />

<span class="dot-task-icon">
  <img class="task-manual" />
</span>

Task icons are single-theme only — fixed-color badges, no dark variant.

Status: the Tasks section ships with the browse/copy/upload UI wired up, the 13 in-scope icon IDs, and their SVGs are all in place — see tasks/README.md. Still open: publishing these as real iconIds in @digital-ai/dot-icons.

Adding a new illustration or integration logo

Option A — Upload via demo UI (recommended)

The demo includes a built-in upload flow that handles everything automatically.

On the hosted demo (digital-ai.github.io/dot-illustrations/demo/): nothing to run yourself — click Connect GitHub and follow the device-code prompt. This works because a maintainer has deployed the demo/oauth-proxy/ Worker + registered a GitHub OAuth App (one-time setup, see demo/oauth-proxy/). GitHub's device-flow endpoints don't support CORS, so the browser can't call them directly — the Worker forwards those two calls server-to-server. It holds no secrets; Device Flow for public OAuth Apps only needs the Client ID.

If that isn't configured yet, Connect GitHub falls back to a manual Personal Access Token paste-in (scope: public_repo).

Running locally instead: run the local proxy once so the demo can authenticate as you without entering a token:

# From the repo root (requires gh CLI authenticated: gh auth login)
node demo/local-proxy.js

Steps

Open https://digital-ai.github.io/dot-illustrations/demo/ (or your local server)
Click Upload New in the header
Choose what you are uploading:

Illustration

Enter the Illustration ID (lowercase, hyphens only — e.g. my-new-state)
Select the Category: Global or Dashboards
Upload the Light SVG () and Dark SVG () — both are required
Click Connect GitHub (device-code prompt on the hosted demo, local gh auth session with the local proxy running, or PAT paste-in fallback) then Create Pull Request

Integration logo

Enter the Integration ID (lowercase, hyphens — e.g. my-tool)
Upload the single SVG file (no dark variant needed)
Click Connect GitHub (device-code prompt on the hosted demo, local gh auth session with the local proxy running, or PAT paste-in fallback) then Create Pull Request

Task icon

Enter the Task icon ID (lowercase, hyphens — e.g. task-priority-high)
Upload the single SVG file (no dark variant needed)
Click Connect GitHub (device-code prompt on the hosted demo, local gh auth session with the local proxy running, or PAT paste-in fallback) then Create Pull Request

The PR is created automatically with:

SVG file(s) committed to the correct folder
CSS rule added to index.css
ID added to demo/script.js in alphabetical order

The local proxy uses your existing gh auth credentials — no token input required. The hosted demo's Connect GitHub button uses the device-flow proxy instead (see Prerequisites above); if it's not yet configured, it falls back to PAT paste-in.

Option B — Manual contribution

Use this if the upload UI is not available.

Adding an illustration

Add your SVG files to the correct folders:
```
illustrations/light/global/my-new-state.svg
illustrations/dark/global/my-new-state.svg
```
Use dashboards/ instead of global/ for dashboard-specific illustrations.

Add CSS rules to index.css:

.dot-illustration img.my-new-state.light {
    content: url('./illustrations/light/global/my-new-state.svg');
}
.dot-illustration img.my-new-state.dark {
    content: url('./illustrations/dark/global/my-new-state.svg');
}

Add the ID to demo/script.js inside the correct list (globalList or dashboardsList), alphabetically ordered:

const globalList = [
  "add-new",
  "my-new-state",  // ← inserted alphabetically
  "no-chat",
];

Adding an integration logo

Add your SVG to integrations/my-tool.svg

Add a CSS rule to index.css:

.dot-integration img.my-tool {
    content: url('./integrations/my-tool.svg');
}

Add the ID to demo/script.js inside integrationsList, alphabetically ordered:

const integrationsList = [
  "microsoft-teams",
  "my-tool",     // ← inserted alphabetically
  "mysql",
];

Open a pull request and post in #dot-components on Slack for review.

Adding a task icon

Add your SVG to tasks/my-task-icon.svg

Add a CSS rule to index.css (under the TASK ICONS section):

.dot-task-icon img.my-task-icon {
    content: url('./tasks/my-task-icon.svg');
}

Add the ID to demo/script.js's taskIconsList, alphabetically ordered.
Open a pull request and post in #dot-components on Slack for review.

Troubleshooting

Latest dot-illustrations not picked up by dot-components

Add a resolutions entry to your package.json:

"resolutions": {
  "@digital-ai/dot-illustrations": "latest"
}

Integration image not showing

Make sure the CSS is imported: <link rel="stylesheet" href="./index.css" />. The library uses content: url() on <img> elements — the <img> tag must have no src attribute and the class must match the integration ID exactly.

More information: dot design system — Illustrations