fix(react-native): strip orphaned url(#id) attributes and <use> elements after unsupported <defs> nodes are dropped

[ThaLuffy]

Problem

When SVGR runs in React-Native projects it removes unsupported SVG nodes such as <filter>, <clipPath>, and <mask>.
The related attributes (filter="url(#…)", clipPath="url(#…)", etc.) and <use href="#…"> references remain in the output. Chromium-based browsers ignore these dangling references, but Safari refuses to paint any element that targets a missing definition, producing partially invisible graphics.

Fix

The babel-plugin-transform-react-native-svg visitor now:

1. Tracks every unsupported element that is removed.
2. Walks the tree again to:
   • delete attributes whose value is url(#id) when the referenced id no longer exists in the AST,
   • delete <use> elements whose href/xlinkHref target a missing id.

This guarantees that the generated component never contains broken references, restoring correct rendering in Safari and other strict SVG user agents.

Impact

• No change for SVGs that already conform to the supported subset.
• SVGs containing removed <defs> entries now render consistently across browsers.

Checklist

• Conventional Commit message
• Code formatted with project tooling
• Tests cover the new behaviour (none existed for this edge-case; happy to add if desired)
• CHANGELOG entry added under Bug Fixes

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
svgr	❌ Failed (Inspect)			Jul 2, 2025 9:27pm

[ThaLuffy]

@gregberge