Chore: Inline toolbar SVG icons in examples via Vite asset handling#8430
Merged
etrepum merged 1 commit intoApr 30, 2026
Merged
Conversation
Closes facebook#7236. Five examples (`react-rich`, `react-rich-collab`, `react-table`, `extension-react-table`, `node-replacement`) referenced their toolbar SVG icons from `public/icons/` via paths Vite cannot resolve at build time, so the icons were emitted as separate HTTP requests at runtime. Move each example's `public/icons/` to `src/icons/` and update the `src/styles.css` references to `url(./icons/foo.svg)`. Vite then inlines each icon as a `data:image/svg+xml` URI in the built CSS (each icon is under the default 4096-byte `assetsInlineLimit`). Verified per example: the built CSS contains 10 data URIs and zero external icon references, and no `dist/icons/` directory is created. This adopts the pattern already used by `examples/node-state-style/`, which uses `src/icons/` and `url(./icons/foo.svg)` (unquoted) — the existing in-repo precedent. `react-rich-collab` previously used absolute `url(/icons/...)` paths while the other four used bare `url(icons/...)`; both forms are unified to `url(./icons/...)`. Pre-existing `url(../images/icons/plus.svg)` references in `react-table` and `extension-react-table` (lines 509-535 / 518-544) target a non-existent path on `main` and are left untouched — Vite already warns about them and a fix is out of scope for this change.
markselby9
requested review from
acywatson,
etrepum,
fantactuka,
ivailop7,
potatowagon,
takuyakanbr and
zurfyx
as code owners
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
etrepum
approved these changes
Apr 30, 2026
etrepum
left a comment
etrepum
left a comment
Collaborator
There was a problem hiding this comment.
Looks good assuming all build checks still pass
Merged
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
2 participants
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.
Description
Closes #7236.
The five examples
react-rich,react-rich-collab,react-table,extension-react-table, andnode-replacementreference their toolbar SVG icons frompublic/icons/via paths Vite cannot resolve at build time, so the icons are emitted as separate HTTP requests at runtime instead of inlined asdata:image/svg+xmlURIs.This PR moves each example's
public/icons/tosrc/icons/(viagit mvso history is preserved) and updatessrc/styles.cssto reference them asurl(./icons/foo.svg). Vite then inlines each icon as a data URI in the built CSS — every icon is well under the default 4096-byteassetsInlineLimit. Verified per example: the built CSS contains 10 inlined data URIs, zero remaining external icon references, and nodist/icons/directory is created.This adopts the pattern already used by
examples/node-state-style/, which usessrc/icons/and unquotedurl(./icons/foo.svg)— the existing in-repo precedent.Notes
react-rich-collabpreviously used absoluteurl(/icons/...)paths while the other four used bareurl(icons/...). Both forms are unified tourl(./icons/...).url(../images/icons/plus.svg)references inreact-tableandextension-react-table(lines 509-535 / 518-544) target a non-existent path onmainand are left untouched — Vite already warns about them onmain. A fix for those is out of scope for this PR.pnpm-workspace.yamlexcludesexamples/**/*and each example's README markets it as standalone via "Open in StackBlitz" — sharing assets through a workspace package would break that copy-paste flow.Test plan
Before
npm run buildin any of the five affected examples produces adist/icons/directory and CSS withurl("./icons/foo.svg")left as runtime asset requests (or, forreact-rich-collab,url(/icons/foo.svg)).After
For each of the five examples:
npm install && npm run buildsucceeds.dist/assets/index-*.csscontains 10 occurrences ofdata:image/svg+xml,...and zerourl(/icons/...)/url(./icons/...)/url(icons/...)references.dist/icons/directory is created (icons are not copied as separate assets).react-rich(single editor) andreact-rich-collab(split-screen Yjs collab) — all 10 toolbar icons render correctly.