perf(ui): render icons through an svg sprite#26950
Open
Hona wants to merge 2 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR optimizes icon rendering in the @opencode-ai/ui package by switching from inlining SVG paths per <Icon> instance to referencing symbols in a shared SVG sprite, aiming to reduce per-render CPU cost (as reflected in the provided INP/icon CPU benchmarks).
Changes:
- Add a DOM-injected SVG sprite containing
<symbol>definitions for all icons. - Update
<Icon>to render via<use href="#...">instead ofinnerHTMLpath injection. - Centralize per-icon
viewBoxselection logic for sprite symbols and instances.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
143
to
+160
| @@ -123,11 +152,12 @@ export function Icon(props: IconProps) { | |||
| [local.class ?? ""]: !!local.class, | |||
| }} | |||
| fill="none" | |||
| viewBox={viewBox()} | |||
| innerHTML={icons[local.name as keyof typeof icons]} | |||
| viewBox={viewBox(local.name)} | |||
| aria-hidden="true" | |||
| {...others} | |||
| /> | |||
| > | |||
| <use href={`#${symbol(local.name)}`} /> | |||
| </svg> | |||
Comment on lines
143
to
+145
| const [local, others] = splitProps(props, ["name", "size", "class", "classList"]) | ||
| const viewBox = () => | ||
| local.name === "magnifying-glass" || local.name === "arrow-undo-down" ? "0 0 16 16" : "0 0 20 20" | ||
| onMount(ensureSprite) | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Benchmark: dribble.tf GitHub CLI session initial timeline load
Scenario: start on \Read couple of files, click \GitHub CLI: sticky jump movement & physics analysis for Momentum Mod project, wait for the target timeline to stabilize. Electron dev build, \OPENCODE_DB=~/.local/share/opencode/opencode.db, 3 traces per build.
Reference: https://css-tricks.com/svg-symbol-good-choice-icons/