← ClaudeAtlas

image-to-componentlisted

Use when a raster — PNG, JPG, WebP, screenshot, mockup crop — must become an SVG asset or a typed React component. Also on "vectorize", "trace this", "convert to SVG", "icon from this image", "logo to component", "SVG component from a mockup".
RubyEyedReaper/Odin-Skills · ★ 0 · Web & Frontend · score 58
Install: claude install-skill RubyEyedReaper/Odin-Skills
# image-to-component > A traced SVG is only as good as the diff that checked it. Numbers decide, not a glance. ## What this is not for | The task | Its owner | |---|---| | A page, screen, card, form or any layout in a mockup | **Rebuild it** — [references/rebuild-route.md](references/rebuild-route.md), then `frontend-design` / `interface-design` | | Text of any size | Real text in markup. Never traced | | Designing a new icon or logo | `frontend-design`, `impeccable` | | A static HTML export | `web-artifacts-builder` | | A known icon or brand mark, recognisable but too small or degraded to trace | **here, `--replace`** — the pinned library vector, verified against its look-alikes ([references/replacement.md](references/replacement.md)) | | An asset that is WHOLLY a container shape — an app tile, a badge disc, a status pill, a rounded-rect backplate, a ring, or a tile with one glyph on it | **here, `--primitive`** — one fitted `<circle>`/`<rect rx>`/`<ellipse>` (stroked for a ring; plus the traced glyph for a tile), verified against the family it could be instead ([ADR-0175](../../docs/adr/0175-in-asset-containers-are-fitted-primitives.md)) | | **One isolated icon, logo mark, illustration or object → SVG + TSX** | **here** | ## Pipeline ```sh bash scripts/doctor.sh # 0 ready · 1 launcher missing · 3 tools could not resolve bash scripts/i2c.sh <image> --name <Pascal> --kind icon|logo|illustration --out <dir> --auto [--color currentColor] bash scripts/i2c.sh <image