Bumps svgr from v5 to v8 #3163
Open
Bumps svgr from v5 to v8 #3163
Conversation
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
🦋 Changeset detectedLatest commit: 71635dc The changes in this PR will be included in the next version bump. This PR includes changesets to release 72 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
Pull Request Overview
This PR upgrades the SVGR dependency from version 5 to version 8, which requires significant refactoring of the icon generation code due to breaking API changes between these major versions.
- Removes the custom SVGR template system and replaces it with inline string replacement
- Updates the SVGR API calls to use the new v8 interface with
transform()instead of the default export - Maintains the same LeafyGreen component wrapper functionality through post-processing
Reviewed Changes
Copilot reviewed 4 out of 187 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/icon/scripts/prebuild/svgrTemplate.ts | Completely removed - custom template no longer needed with new approach |
| packages/icon/scripts/prebuild/index.ts | Refactored to use SVGR v8 API and inline string replacement for component customization |
| packages/icon/package.json | Updated SVGR dependency from ^5.3.1 to ^8.1.0 |
| .changeset/itchy-friends-change.md | Added changeset documenting the SVGR version bump |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Comment on lines
145
to
146
| const customizedSVGR = processedSVGR.replace( | ||
| /import \* as React from "react";\nimport type \{ SVGProps \} from "react";\nconst (\w+) = \(props: SVGProps<SVGSVGElement>\) => (.*?);\nexport default \1;/s, |
There was a problem hiding this comment.
This complex regex pattern is fragile and depends on exact formatting from SVGR output. Consider using an AST-based approach or at minimum, break this into smaller, more readable regex patterns with comments explaining each part.
Copilot uses AI. Check for mistakes.
Co-authored-by: Copilot <[email protected]>
|
Size Change: +41.9 kB (+2.64%) Total Size: 1.63 MB
ℹ️ View Unchanged
|
TheSonOfThomp
requested changes
Sep 30, 2025
|
|
||
| // Post-process to add custom LeafyGreen wrapper | ||
| const customizedSVGR = processedSVGR.replace( | ||
| /import \* as React from "react";\nimport type \{ SVGProps \} from "react";\nconst (\w+) = \(props: SVGProps<SVGSVGElement>\) => (.*?);\nexport default \1;/s, |
There was a problem hiding this comment.
Why are we removing svgrTemplate.ts and hard-coding it inline here?
There was a problem hiding this comment.
SVGR 8 still takes a template prop. (https://react-svgr.com/docs/options/#template) IMO we should be using this instead of hard-coding a complex regex replacer
|
|
||
| // Note: must use `require` since svgrrc is a CommonJS module | ||
| // @ts-ignore - svgrrc is not typed | ||
| const svgrrc = await require('../../.svgrrc.js'); |
There was a problem hiding this comment.
should we rm svgrrc.js as well?
TheSonOfThomp
requested changes
Oct 3, 2025
| componentName: file.name, | ||
| plugins: ['@svgr/plugin-jsx'], | ||
| typescript: true, | ||
| jsx: { |
There was a problem hiding this comment.
can we extract this config into either a separate file, or at least a constant?
| ); | ||
|
|
||
| // Apply custom LeafyGreen wrapper using template | ||
| const customizedSVGR = applyLeafyGreenTemplate(processedSVGR, file.name); |
There was a problem hiding this comment.
this just moves the brittle string replacement to a separate file. We should use the transform Config.template property
There was a problem hiding this comment.
I noticed Cursor has difficulty doing this. There's a weird bug/quirk in the tpl function where it doesn't like when you concat words after interpolated var names.
If you tell cursor to do that it works:
e.g. instead of ${variables.componentName}Props) use ${variables.componentName + "Props)"}
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.
✍️ Proposed changes
🎟 Jira ticket: Name of ticket
✅ Checklist
For new components
For bug fixes, new features & breaking changes
pnpm changesetand documented my changes🧪 How to test changes