Skip to content

perf(icons): reduce and guard SVG path precision - #6839

Merged
waleedlatif1 merged 6 commits into
stagingfrom
perf/react-doctor-svg-precision
Aug 20, 2026
Merged

perf(icons): reduce and guard SVG path precision#6839
waleedlatif1 merged 6 commits into
stagingfrom
perf/react-doctor-svg-precision

Conversation

@j15z

@j15z j15z commented Aug 19, 2026

Copy link
Copy Markdown
Collaborator

Summary

Reusable icon SVGs now ship without invisible coordinate precision, and CI prevents that byte cost from returning. Literal icon paths are limited to three decimal places across 180 scoped files, with a reasoned path-local exception available when rounding would visibly change geometry.

The Sim wordmark remains byte-for-byte unchanged and is the sole remaining React Doctor SVG precision finding. The Quartr pattern also keeps its exact 1/280 scale because rounding that structural transform would hide the image.

Metric staging This PR
Literal icon paths above three decimals 252 0
Raw source across the eight changed icon files 1,608,775 bytes 1,563,995 bytes (-44,780)
Whole-file gzip proxy 666,826 bytes 642,847 bytes (-23,979)
React Doctor SVG precision findings 8 in the original sweep 1 untouched wordmark

The gzip measurement compares source files, not production bundles; final download savings depend on bundling and tree-shaking.

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation
  • Other: Performance improvement and CI guardrail

Testing

  • bun run test:icon-path-precision: 6 tests passed, covering the three-decimal boundary, scientific notation, literal JSX forms, and the reasoned exception contract
  • bun run check:audits: all 31 repository audits passed, including icon path syntax, SVG precision, generated docs, API validation, and monorepo boundaries
  • bun run type-check passed in apps/sim, apps/docs, and packages/emcn
  • bunx react-doctor@latest --verbose: 3,449 total existing findings; rendering-svg-precision reports only the untouched OG wordmark
  • Before/after rendering was inspected at identical viewport and display sizes for all eight changed icon files

Reviewers should focus on whether the three-decimal boundary and path-local exception are appropriate for reusable icons. The check intentionally excludes transforms, view boxes, dynamic path expressions, and page-specific artwork.

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

svg-precision-before-after

@vercel

vercel Bot commented Aug 19, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
docs Ready Ready Preview Aug 20, 2026 2:31am

Request Review

@cursor

cursor Bot commented Aug 19, 2026

Copy link
Copy Markdown

PR Summary

Low Risk
Cosmetic SVG coordinate formatting only; no runtime logic or auth changes. Risk is limited to rare visible icon distortion if rounding were wrong—PR validation targets that.

Overview
Icon SVG paths in apps/docs/components/icons.tsx are rounded to two decimal places (and similar cleanup elsewhere in the icon sweep), replacing long fractional coordinates and scientific-notation zeros with shorter literals. The goal is smaller shipped source and clearing React Doctor rendering-svg-precision findings without changing visible artwork.

The Sim wordmark and Circleback pattern scale are intentionally left unchanged per the PR description. A check:icon-path-precision script enforces at most three fractional digits on literal <path d> values in shared icon catalogs, with optional documented exceptions.

Reviewed by Cursor Bugbot for commit 61a843a. Bugbot is set up for automated code reviews on this repo. Configure here.

@greptile-apps

greptile-apps Bot commented Aug 19, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR reduces numeric precision in static SVG geometry to decrease icon markup size while preserving component APIs and rendering structure.

  • Rounds SVG path coordinates in the shared docs and Sim icon collections.
  • Applies the same optimization to five EMCN icon components.
  • Rounds the Sim wordmark geometry used by the documentation Open Graph image endpoint.

Confidence Score: 5/5

The PR appears safe to merge because the SVG precision reductions preserve valid geometry and existing component contracts.

The changes are limited to static numeric SVG data; command structures, fills, view boxes, exports, and runtime behavior remain intact, with no concrete observable failure identified.

Important Files Changed

Filename Overview
apps/docs/app/api/og/route.tsx Rounds the Sim wordmark’s path coordinates without changing the OG image route behavior or SVG structure.
apps/docs/components/icons.tsx Reduces precision across static icon geometry; paths remain valid and no actionable rendering regression was identified.
apps/sim/components/icons.tsx Mirrors the docs icon precision reductions without changing exported component contracts.
packages/emcn/src/icons/bubble-chat-delay.tsx Rounds static path coordinates while preserving the icon component API and SVG command structure.
packages/emcn/src/icons/download.tsx Rounds static path coordinates with no identified functional or rendering defect.
packages/emcn/src/icons/duplicate.tsx Rounds static path coordinates with no identified functional or rendering defect.
packages/emcn/src/icons/mic.tsx Rounds static path coordinates with no identified functional or rendering defect.
packages/emcn/src/icons/upload.tsx Rounds static path coordinates with no identified functional or rendering defect.

Reviews (1): Last reviewed commit: "perf(react): reduce SVG path precision" | Re-trigger Greptile

@j15z j15z changed the title perf/react doctor svg precision perf(react): reduce SVG path precision Aug 19, 2026
@j15z
j15z force-pushed the perf/react-doctor-svg-precision branch from 0965452 to 56e83f5 Compare August 19, 2026 18:09
@j15z
j15z changed the base branch from main to staging August 19, 2026 18:09
@j15z
j15z requested a review from a team as a code owner August 20, 2026 00:16

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 58c07c1. Configure here.

Comment thread .github/workflows/test-build.yml Outdated
@j15z
j15z force-pushed the perf/react-doctor-svg-precision branch from 07b8422 to 61a843a Compare August 20, 2026 02:26
@j15z j15z changed the title perf(react): reduce SVG path precision perf(icons): reduce and guard SVG path precision Aug 20, 2026
@j15z
j15z requested a review from waleedlatif1 August 20, 2026 03:51
@waleedlatif1
waleedlatif1 merged commit 0b71717 into staging Aug 20, 2026
36 checks passed
@waleedlatif1
waleedlatif1 deleted the perf/react-doctor-svg-precision branch August 20, 2026 05:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants