fix(babel-plugin-transform-react-native-svg): support SVG filter elements - #1031
Open
exzos28 wants to merge 1 commit into
Open
fix(babel-plugin-transform-react-native-svg): support SVG filter elements#1031exzos28 wants to merge 1 commit into
exzos28 wants to merge 1 commit into
Conversation
…ents react-native-svg has long supported the <Filter> and <Fe*> primitive components (FeBlend, FeColorMatrix, FeComponentTransfer, FeComposite, FeConvolveMatrix, FeDiffuseLighting, FeDisplacementMap, FeDistantLight, FeDropShadow, FeFlood, FeFuncA/B/G/R, FeGaussianBlur, FeImage, FeMerge, FeMergeNode, FeMorphology, FeOffset, FePointLight, FeSpecularLighting, FeSpotLight, FeTile, FeTurbulence), but elementToComponent never included them, so every filter-based SVG (drop shadows, inner shadows, blurs, etc.) silently lost its filter element when transformed for native. Add the missing entries to elementToComponent so these elements are mapped to their react-native-svg components instead of being dropped.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Deployment failed for project svgr with the following error: Learn More: https://vercel.com/docs/concepts/projects/project-configuration |
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
1 participant
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.
Problem
react-native-svghas long supported the<Filter>and<Fe*>primitivecomponents (
FeBlend,FeColorMatrix,FeComponentTransfer,FeComposite,FeConvolveMatrix,FeDiffuseLighting,FeDisplacementMap,FeDistantLight,FeDropShadow,FeFlood,FeFuncA,FeFuncB,FeFuncG,FeFuncR,FeGaussianBlur,FeImage,FeMerge,FeMergeNode,FeMorphology,FeOffset,FePointLight,FeSpecularLighting,FeSpotLight,FeTile,FeTurbulence), butelementToComponentnever included them. Any SVG thatuses a
<filter>(drop shadows, inner shadows, blurs, etc.) silently losesthe filter when transformed with
native: true— the elements just getremoved by
replaceElement, with only a trailing comment noting they weredropped.
Reported downstream in kristerkari/react-native-svg-transformer#434.
Fix
Add the missing SVG filter primitive tags to
elementToComponent, mappingeach to its corresponding
react-native-svgcomponent (the same componentsreact-native-svg's ownelements.jsalready exports).Testing
Added a test case transforming a
<filter>containing<feFlood>and<feBlend>, asserting they're mapped toFilter/FeFlood/FeBlendandimported from
react-native-svginstead of being dropped.Verified end-to-end against
react-native-svg@15.15.5— all of the addedelement names are exported components in that version (checked
node_modules/react-native-svg/lib/commonjs/elements.js).