OpsDesign — a browser-based SVG workspace born from my own frustrations

A while ago, I was working on a side project with a lot of icons. Every SVG I pulled from a design tool was bloated, with hardcoded colors instead of var(--color-primary). I needed React components, but another part used Vue. I would run SVGO, manually replace values, craft a React component, then redo everything for Vue. One icon, ten minutes. The project had dozens.
Existing tools each did one piece of the puzzle. SVG editors were drawing tools, not markup refiners. Optimizers were CLI-only with no preview. Component converters handled one framework. Nobody had wired them together. So I built OpsDesign.

What It Does
OpsDesign is a browser-based pipeline from raw SVG to production component code: open, refine, optimize, map variables, export typed components — all client-side.

1. Markup workspace. Built on the same engine as VS Code. Click a shape and the editor jumps to its code; select a and it highlights on the canvas. Bidirectional linking, no tab toggling.
2. Cleanup and formatting. Fixes missing xmlns, redundant attributes, and inconsistent structure in one pass. You preview every change before applying it.
3. Batch processing. Drop in up to 50 files. Recolor, optimize, rename, and reformat all at once with per-file size tracking.
4. Variable mapping. Upload CSS custom properties, Tailwind config, or a JSON map, and every hardcoded color becomes a variable reference. Handles fill, stroke, stop-color, gradients, and currentColor correctly. This is the feature I am most proud of.
5. Multi-framework export. One SVG produces typed components for React (forwardRef), Vue 3 (defineExpose), Svelte 5, Solid, and Qwik. No more maintaining six copies of the same icon.
6. AI refinement. Optional AI suggestions for cleaning up messy structures. The core workflow works perfectly without it. Everything runs locally in your browser. No uploads, no server execution, no asset storage. The Technical Journey Bidirectional Monaco-SVG linking took three rewrites. Every , , and maps to a line in the editor via a lightweight AST that syncs with Monaco's decoration API — and stays accurate as nodes are added and removed. The export pipeline was a rabbit hole. React wants forwardRef, Vue 3 needs defineExpose, Svelte 5 uses runes, Solid tracks fine-grained reactivity, Qwik is resumable. A configurable template system handles all five with typed props and TypeScript support. Token mapping was the most satisfying build. Colors appear in fill, stroke, stop-color, inline styles, url() references, and gradient stops — each needing different substitution logic. The engine resolves a dependency graph, applies the right variable, and leaves none and currentColor untouched. Looks trivial. It is not. What I Am Looking For OpsDesign is live at opsdesign.com. Free workspace covers single-file refinement, optimization, and component generation. I am looking for two things: Honest feedback. Paste a messy SVG from Figma, run cleanup, map colors to variables, generate a component. Tell me what breaks or feels slow. Your SVG horror stories. What is the worst part of your workflow? Where do the tools fall apart? Thanks for reading. Go easy on me — but not too easy. — The builder behind OpsDesign