Design Asset Library

Source of truth for icons, illustrations, and animations. Generates React components, metadata exports, and publishes as @guideveloper/design-assets.

Structure

• assets/ raw assets + metadata
• assets/**/versions/<name>/vN.* immutable per-asset version history snapshots
• scripts/generateAssets.ts scans assets and builds components + metadata
• src/components generated React components
• src/metadata generated metadata arrays + assetVersions manifest + packageVersion

Commands

• npm run generate-assets – generate components/metadata from assets
• npm run build – bundle library via tsup (ESM + CJS)

Workflow

1. Add/update files under assets/icons|illustrations|animations (with matching .json metadata files).
2. Run npm install then npm run generate-assets.
3. When you want a release, manually trigger the workflow (.github/workflows/codegen-and-publish.yml) which runs codegen, bumps the version, builds the package, publishes to npm, and pushes the tagged release back to master.

Asset metadata format

• Naming: Use kebab-case file names (e.g. pleased-to-meet-you). Long multi-word names without separators will fail generation.
• Icon: assets/icons/name.svg + assets/icons/name.json { name, tags?, description? }
• Illustration: assets/illustrations/name.svg|png + assets/illustrations/name.json { name, category?, tags?, description? }
• Animation: assets/animations/name.json (Lottie) + assets/animations/name.meta.json { name, frameRate?, loop?, tags?, description? }

Version Metadata Exports

• packageVersion: library package version baked into generated metadata.
• assetVersions: per-asset/per-version manifest containing:
  • type, name, version, isLatest
  • assetPath, metaPath, extension
  • packageVersion

This is used by Design Asset Factory to render version dropdowns and download links for raw files/JSON.

Publishing

Set secrets:

• NPM_TOKEN for npm publish

Package name: @guideveloper/design-assets

Manual release button

• GitHub Actions has a built-in “Run workflow” button for Manual Codegen and Publish (workflow dispatch only; no auto-runs on master).
• A lightweight front-end trigger lives at scripts/run-manual-build.html with a “Run workflow” button. Open the file in a browser, provide a GitHub token with workflow scope (and repo/public_repo as needed), choose the bump type, and dispatch the workflow on master.