CyberElems

A Qt-based desktop application for browsing, previewing, and customizing 90 cyberpunk SVG HUD elements from the react-cyber-elements library — re-implemented natively in C++/Qt with the same CSS-class color model.

What it does

CyberElems loads all 90 cyber HUD/UI elements as embedded SVG resources and renders them in a fast, scrollable grid. Pick any element to preview it at arbitrary size, recolor its primary (fil0) and secondary (fil1) fills, tweak stroke and opacity, and copy or export the result as SVG or PNG.

The color manipulation mirrors the React library's CSS approach: SVG fills are string-replaced in the source before rendering through QSvgRenderer, so what you see matches the upstream CSS-driven library.

Build

Requirements

• Qt 6.x (Widgets + SVG modules) — a static build is recommended for distribution
• C++17 compiler
• macOS 12+ (deployment target)

Steps

make        # qmake runs automatically when CyberElems.pro changes

The bundle is produced at build-macx-clang/CyberElems.app.

Note: The 90 SVG assets under content/ are generated once from the upstream TSX components via generate.py. Re-run it only when refreshing from a new release of react-cyber-elements.

Distributable build (Developer ID + notarization)

One-time setup of an Apple notary keychain profile:

xcrun notarytool store-credentials cyberelems-notary \
    --apple-id YOU@example.com \
    --team-id YOUR_TEAM_ID \
    --password APP_SPECIFIC_PASSWORD

Then:

./_scripts/archive.sh                        # signed .app only
./_scripts/archive.sh + --notarize           # bump build, archive, notarize
./_scripts/archive.sh + --notarize --dmg     # also produce a notarized .dmg

Outputs land in dist/.

Override the Qt toolchain or notary profile name via env vars:

QT_BIN=/path/to/Qt/6.8-static/clang_64/bin \
NOTARY_PROFILE=cyberelems-notary \
    ./_scripts/archive.sh + --notarize --dmg

Project structure

CyberElems/
├── cyberelems.cpp            # Entire application (model, delegate, widgets, main)
├── CyberElems.pro            # qmake project file
├── cyberelems.qrc            # Resource manifest (references content/*.svg)
├── content/                  # 90 generated SVG elements
├── generate.py               # TSX → SVG extraction tool (run once)
├── CyberElems.icns           # App icon
├── Resources/
│   └── CyberElems.entitlements
└── _scripts/
    └── archive.sh            # Developer ID build + notarize + DMG

License

Copyright © 2025–2026 KomSoft Oprogramowanie. All rights reserved.

SVG elements are derived from react-cyber-elements; refer to that project for upstream licensing.

Support

If you find this useful, please consider supporting development.