fix/icons/isChonk svg #102881

Jesse-Box · 2025-11-06T17:57:24Z

The goal of this PR was to semi-revert the decision to change our strategy for styling icons in our app.

Originally the icons that evaluated to true for theme.isChonk used kind="stroke" instead of kind="path". Now all but one (IconSeer) icon uses now kind="path" regardless of what the theme evaluates to. The art is still different from previous icons.

theme.withChonk true (New)

theme.withChonk true (Old)

else

static/app/icons/iconCircleFill.tsx

cursor · 2025-11-06T17:59:34Z

static/app/icons/iconCodecov.tsx

+      {theme.isChonk ? (
+        <path d="M8.004 0.320666C3.594 0.323999 0.00333333 3.88733 0 8.266V8.286L1.36133 9.07933L1.38 9.06733C2.02913 8.62223 2.79827 8.38507 3.58533 8.38733C3.832 8.38733 4.074 8.41 4.30867 8.454L4.28467 8.45C5.00159 8.5773 5.66673 8.90825 6.20067 9.40333L6.198 9.402L6.43133 9.61933L6.56333 9.33C6.69133 9.05 6.83933 8.78733 7.00333 8.548C7.07 8.452 7.142 8.35467 7.22467 8.25067L7.36133 8.07933L7.19333 7.93867C6.45907 7.32324 5.57809 6.90824 4.636 6.734L4.60133 6.72867C3.69445 6.5641 2.76121 6.62151 1.88133 6.896L1.92133 6.88533C2.56933 4.048 5.064 2.07 8.01 2.068C8.82632 2.06531 9.63514 2.22368 10.3902 2.53404C11.1452 2.8444 11.8316 3.30065 12.41 3.87667C13.2416 4.69658 13.8216 5.73693 14.082 6.87533C13.5428 6.70748 12.9814 6.62229 12.4167 6.62267H12.314C12.0767 6.62667 11.8473 6.64467 11.6233 6.67467L11.6533 6.67133L11.6253 6.67533C11.5384 6.68655 11.4517 6.69989 11.3653 6.71533C11.3273 6.722 11.2893 6.73 11.252 6.73733C11.1644 6.75517 11.0773 6.77517 10.9907 6.79733L10.8987 6.82C10.7905 6.84906 10.6831 6.88107 10.5767 6.916L10.5567 6.92267C10.3207 7.00267 10.0847 7.10133 9.85667 7.216L9.83867 7.22467C9.73244 7.27822 9.62794 7.33513 9.52533 7.39533L9.502 7.41C8.96897 7.72752 8.49377 8.13329 8.09667 8.61L8.08933 8.61933L8.03933 8.68067C7.95115 8.78924 7.86709 8.90109 7.78733 9.016C7.72867 9.10267 7.66933 9.19533 7.59533 9.31733L7.55533 9.38667C7.50072 9.48123 7.4487 9.57726 7.39933 9.67467L7.38867 9.694C7.27533 9.92067 7.17733 10.1593 7.09533 10.4027L7.084 10.438C6.88986 11.0214 6.7974 11.6339 6.81067 12.2487V12.244V12.3187C6.81405 12.4145 6.81917 12.5103 6.826 12.606L6.82467 12.5813C6.83238 12.673 6.84171 12.7646 6.85267 12.856L6.856 12.884L6.86467 12.9527C6.87667 13.0373 6.89 13.1207 6.906 13.2047C7.06667 14.0487 7.46933 14.8927 8.06933 15.6447L8.09667 15.6787L8.12467 15.6453C8.364 15.3627 8.95733 14.4653 9.008 13.9273V13.9173L9.004 13.9087C8.72323 13.3753 8.57677 12.7814 8.57733 12.1787C8.57733 10.168 10.1573 8.498 12.1747 8.37733L12.308 8.37267C13.1315 8.35389 13.9402 8.59279 14.6213 9.056L14.6393 9.06867L16 8.27733V8.25733C16.0034 7.21271 15.7981 6.17793 15.3963 5.21367C14.9945 4.24941 14.4042 3.3751 13.66 2.642C12.9164 1.90201 12.0341 1.316 11.0637 0.917552C10.0932 0.519102 9.05371 0.31604 8.00467 0.319999L8.004 0.320666Z" />
+      ) : (
+        <path d="M12.006.481C5.391.486.005 5.831 0 12.399v.03l2.042 1.19.028-.018a5.82 5.82 0 0 1 3.308-1.02c.37 0 .733.034 1.085.1l-.036-.006a5.69 5.69 0 0 1 2.874 1.43l-.004-.002.35.326.198-.434c.192-.42.414-.814.66-1.173.1-.144.208-.29.332-.446l.205-.257-.252-.211a8.33 8.33 0 0 0-3.836-1.807l-.052-.008a8.565 8.565 0 0 0-4.08.251l.06-.016c.972-4.256 4.714-7.223 9.133-7.226a9.31 9.31 0 0 1 6.6 2.713 9.196 9.196 0 0 1 2.508 4.498 8.385 8.385 0 0 0-2.498-.379h-.154c-.356.006-.7.033-1.036.078l.045-.005-.042.006a8.103 8.103 0 0 0-.39.06c-.057.01-.114.022-.17.033a8.102 8.102 0 0 0-.392.09l-.138.034a9.21 9.21 0 0 0-.483.144l-.03.01c-.354.12-.708.268-1.05.44l-.027.013a8.41 8.41 0 0 0-.47.256l-.035.022a8.216 8.216 0 0 0-2.108 1.8l-.011.014-.075.092a8.345 8.345 0 0 0-.378.503c-.088.13-.177.269-.288.452l-.06.104a8.985 8.985 0 0 0-.234.432l-.016.029c-.17.34-.317.698-.44 1.063l-.017.053a8.052 8.052 0 0 0-.41 2.716v-.007.112a12 12 0 0 0 .023.431l-.002-.037a11.676 11.676 0 0 0 .042.412l.005.042.013.103c.018.127.038.252.062.378.241 1.266.845 2.532 1.745 3.66l.041.051.042-.05c.359-.424 1.249-1.77 1.325-2.577v-.015l-.006-.013a5.56 5.56 0 0 1-.64-2.595c0-3.016 2.37-5.521 5.396-5.702l.2-.007a5.93 5.93 0 0 1 3.47 1.025l.027.019L24 12.416v-.03a11.77 11.77 0 0 0-3.51-8.423A11.962 11.962 0 0 0 12.007.48z" />


Bug: SvgIcon viewBox mismatch clips non-Chonk path

The non-Chonk path contains coordinates designed for a 24x24 viewBox (e.g., "L24 12.416"), but the custom viewBox="0 0 24 24" was removed in this change. The SvgIcon component defaults to viewBox="0 0 16 16", which means the icon will be clipped and incorrectly positioned. The path coordinates need to be scaled down by 2/3 for a 16x16 viewBox, or the custom viewBox should be restored.

static/app/icons/icons.stories.tsx

natemoo-re

Changes look good so far! One general recommendation would be to remove the kind prop from the SvgIcon component entirely—it was added to support the new UI2 icons, but if we're not using it anymore, we can safely remove the additional logic.

static/app/icons/iconCircleFill.tsx

natemoo-re · 2025-11-13T19:31:44Z

static/app/icons/iconLab.tsx

Looks like isSolid functionality has been removed—intentional?

static/app/icons/icons.stories.tsx

Jesse-Box · 2025-11-13T20:16:46Z

Changes look good so far! One general recommendation would be to remove the kind prop from the SvgIcon component entirely—it was added to support the new UI2 icons, but if we're not using it anymore, we can safely remove the additional logic.

~~The reason why I kept it was because of the seer icon and its animations. Or can I still animate solid shapes just as easily?~~ Done!

billyvg

RSLGTM

billyvg · 2025-11-17T17:16:41Z

static/app/components/replays/breadcrumbs/replayComparisonModal.tsx

                >
                  <Button
                    aria-label={t('Adjust diff')}
-                    icon={<IconSliders size="md" direction="up" />}


Is it intentional to remove direction=up here?

Jesse-Box requested a review from a team as a code owner November 6, 2025 17:57

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Nov 6, 2025

Jesse-Box marked this pull request as draft November 6, 2025 17:58

cursor bot reviewed Nov 6, 2025

View reviewed changes

vercel bot deployed to Preview November 6, 2025 18:01 View deployment

github-actions bot added the Scope: Backend Automatically applied to PRs that change backend components label Nov 12, 2025

vercel bot deployed to Preview November 12, 2025 15:45 View deployment

Jesse-Box added 23 commits November 12, 2025 18:03

Modified: path for iconIssues

c8f274b

Modified: path for 'iconCompass'

14e2a22

Modified: path for 'iconDashboard'

84d39ae

Modified: path for 'iconGraph'

df5ac12

Modified: path for 'iconPrevent'

c7562f2

Modified: path for 'iconSiren'

d03c64d

Modified: path for 'iconSettings'

7fac873

Modified: paths for 'iconQuestion'

001bd14

Modified: path for 'iconBroadcast'

f5a020f

Modified: path for 'iconMyProjects'

e6e67ae

Modified: path for 'iconWarning'

e157f3f

Modified: path for 'iconSearch'

118c6ee

Modified: path for 'iconPlay'

de5d80f

Modified: path for 'iconTable'

ec61344

Modified: path for 'iconMegaphone'

1a6de14

Modified: path for 'iconCase'

58d0ae1

Fixed: prop 'kind' for 'iconGraphLine'

7d76a2f

Modified: path for 'iconClock'

fd6c7d8

Modifed: path for 'iconEllipsis'

2f8d904

Modified: path for 'iconDownload'

f679513

Modified: path for 'iconNot'

4e1d49f

Modified: path for 'iconUnsubscribed'

5935a5c

Modified: path for 'iconSubscribed'

5e9b9e4

getsentry deleted a comment from semgrep-code-getsentry bot Nov 13, 2025

Removed: All Fragment elements from relevant icons

effd6d0

vercel bot deployed to Preview November 13, 2025 15:47 View deployment

Added: Instances of icons with additional props

15133f3

vercel bot deployed to Preview November 13, 2025 16:30 View deployment

Jesse-Box marked this pull request as ready for review November 13, 2025 16:34

cursor bot reviewed Nov 13, 2025

View reviewed changes

static/app/icons/icons.stories.tsx Show resolved Hide resolved

natemoo-re reviewed Nov 13, 2025

View reviewed changes

Jesse-Box added 4 commits November 14, 2025 12:25

Modified: paths and animations for 'iconSeer'

dab748c

Added: default prop 'default for 'iconSeer'

958615f

Modified: classNames of paths in 'iconSeer'

cf0e4c8

Removed: prop 'kind from 'svgIcon' and downstream

e263ccb

vercel bot deployed to Preview November 14, 2025 11:51 View deployment

Jesse-Box added 3 commits November 14, 2025 14:35

Removed: prop values 'left and 'right' from 'iconThumb'

88937de

Removed: isChonk condition for 'iconCircleFill'

d60ebe8

Deleted: 'iconDead'

03363b7

vercel bot deployed to Preview November 14, 2025 13:46 View deployment

Modified: paths for 'iconOpen' 'iconMute' 'iconSettings'

888474c

vercel bot deployed to Preview November 14, 2025 14:18 View deployment

Jesse-Box requested a review from natemoo-re November 14, 2025 14:19

Removed: prop 'direction' from 'iconSliders'

ffb6845

Jesse-Box requested a review from a team as a code owner November 14, 2025 14:54

vercel bot deployed to Preview November 14, 2025 14:57 View deployment

Removed: @Deprecation statement for 'iconCircle' and 'iconCircleFilled'

9a32f88

vercel bot deployed to Preview November 17, 2025 09:26 View deployment

billyvg approved these changes Nov 17, 2025

View reviewed changes

Jesse-Box merged commit da9f6aa into master Nov 18, 2025
48 checks passed

Jesse-Box deleted the fix/icons/isChonk-svg branch November 18, 2025 13:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix/icons/isChonk svg #102881

fix/icons/isChonk svg #102881

Uh oh!

Jesse-Box commented Nov 6, 2025 •

edited

Loading

Uh oh!

Uh oh!

cursor bot Nov 6, 2025

Uh oh!

Uh oh!

natemoo-re left a comment

Uh oh!

Uh oh!

natemoo-re Nov 13, 2025

Uh oh!

Uh oh!

Jesse-Box commented Nov 13, 2025 •

edited

Loading

Uh oh!

billyvg left a comment

Uh oh!

billyvg Nov 17, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

fix/icons/isChonk svg #102881

fix/icons/isChonk svg #102881

Uh oh!

Conversation

Jesse-Box commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

cursor bot Nov 6, 2025

Choose a reason for hiding this comment

Bug: SvgIcon viewBox mismatch clips non-Chonk path

Uh oh!

Uh oh!

natemoo-re left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

natemoo-re Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Jesse-Box commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

billyvg left a comment

Choose a reason for hiding this comment

Uh oh!

billyvg Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Jesse-Box commented Nov 6, 2025 •

edited

Loading

Jesse-Box commented Nov 13, 2025 •

edited

Loading