SVG tags being wrapped

[ntnp]

Current Behavior

SVG tags created by styled are being wrapped by <span class=" _dsp_contents is_Theme">.

HTML structure:

Visible result:

Expected Behavior

SVG tags (path, text, circle, etc) should not be wrapped by <span class=" _dsp_contents is_Theme">. This breaks SVG.

HTML structure:

Visible result:

Tamagui Version

1.98.1

Platform (Web, iOS, Android)

Web

Reproduction

https://codesandbox.io/p/devbox/lucid-field-pqpgs4?workspaceId=9310e085-3695-4d0a-95f9-f187994055bf

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
    Memory: 5.44 GB / 31.61 GB
  Binaries:
    Node: 22.1.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - ~\AppData\Roaming\npm\npm.CMD
    bun: 1.1.8 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (123.0.2420.81)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @babel/core: ^7.24.5 => 7.24.5
    @codeherence/react-native-header: ^0.12.1 => 0.12.1
    @dotlottie/react-player: ^1.6.19 => 1.6.19
    @expo/metro-runtime: ~3.2.1 => 3.2.1
    @expo/vector-icons: ^14.0.1 => 14.0.1
    @gluestack-ui/button: ^1.0.4 => 1.0.4
    @gluestack-ui/checkbox: ^0.1.28 => 0.1.28
    @gluestack-ui/form-control: ^0.1.17 => 0.1.17
    @gluestack-ui/input: ^0.1.29 => 0.1.29
    @gluestack-ui/modal: ^0.1.32 => 0.1.32
    @gluestack-ui/overlay: ^0.1.14 => 0.1.14
    @gluestack-ui/popover: ^0.1.34 => 0.1.34
    @gluestack-ui/select: ^0.1.26 => 0.1.26
    @gluestack-ui/spinner: ^0.1.14 => 0.1.14
    @gluestack-ui/tooltip: ^0.1.30 => 0.1.30
    @hookform/resolvers: ^3.3.4 => 3.3.4
    @legendapp/state: ^2.1.13 => 2.1.13
    @lottiefiles/react-lottie-player: ^3.5.3 => 3.5.3
    @react-native-async-storage/async-storage: 1.23.1 => 1.23.1
    @react-native-community/netinfo: 11.3.1 => 11.3.1
    @react-navigation/native: ^6.1.17 => 6.1.17
    @tamagui/adapt: ^1.97.1 => 1.97.1
    @tamagui/animations-css: ^1.97.1 => 1.97.1
    @tamagui/animations-moti: ^1.97.1 => 1.97.1
    @tamagui/colors: ^1.97.1 => 1.97.1
    @tamagui/config: ^1.97.1 => 1.97.1
    @tamagui/constants: ^1.97.1 => 1.97.1
    @tamagui/get-button-sized: ^1.97.1 => 1.97.1
    @tamagui/image: ^1.97.1 => 1.97.1
    @tamagui/polyfill-dev: ^1.97.1 => 1.97.1
    @tamagui/portal: ^1.97.1 => 1.97.1
    @tamagui/react-native-media-driver: ^1.97.1 => 1.97.1
    @tamagui/sheet: ^1.97.1 => 1.97.1
    @tamagui/tooltip: ^1.97.1 => 1.97.1
    @tamagui/web: ^1.97.1 => 1.97.1
    @tanstack/match-sorter-utils: ^8.15.1 => 8.15.1
    @tanstack/react-query: ^5.35.1 => 5.35.1
    @tanstack/react-table: ^8.16.0 => 8.16.0
    @types/color: ^3.0.6 => 3.0.6
    @types/file-saver: ^2.0.7 => 2.0.7
    @types/luxon: ^3.4.2 => 3.4.2
    @types/mime: ^3.0.4 => 3.0.4
    @types/react: ~18.2.75 => 18.2.79
    @vis.gl/react-google-maps: ^0.10.0 => 0.10.0
    axios: ^1.6.8 => 1.6.8
    color: ^4.2.3 => 4.2.3
    expo: ~51.0.2 => 51.0.2
    expo-asset: ~10.0.6 => 10.0.6
    expo-camera: ~15.0.6 => 15.0.6
    expo-clipboard: ~6.0.3 => 6.0.3
    expo-constants: ~16.0.1 => 16.0.1
    expo-device: ~6.0.2 => 6.0.2
    expo-document-picker: ~12.0.1 => 12.0.1
    expo-file-system: ~17.0.1 => 17.0.1
    expo-font: ~12.0.5 => 12.0.5
    expo-linear-gradient: ~13.0.2 => 13.0.2
    expo-linking: ~6.3.1 => 6.3.1
    expo-localization: ~15.0.3 => 15.0.3
    expo-location: ~17.0.1 => 17.0.1
    expo-notifications: ~0.28.1 => 0.28.1
    expo-router: ~3.5.11 => 3.5.11
    expo-screen-capture: ~6.0.1 => 6.0.1
    expo-sharing: ~12.0.1 => 12.0.1
    expo-splash-screen: ~0.27.4 => 0.27.4
    expo-status-bar: ~1.12.1 => 1.12.1
    expo-system-ui: ~3.0.4 => 3.0.4
    expo-task-manager: ~11.8.1 => 11.8.1
    expo-updates: ~0.25.11 => 0.25.11
    expo-web-browser: ~13.0.3 => 13.0.3
    fast-memoize: ^2.5.2 => 2.5.2
    file-saver: ^2.0.5 => 2.0.5
    jest: ^29.7.0 => 29.7.0
    jest-expo: ~51.0.1 => 51.0.1
    laravel-echo: ^1.16.1 => 1.16.1
    lottie-react-native: 6.7.0 => 6.7.0
    lucide-react-native: ^0.378.0 => 0.378.0
    luxon: ^3.4.4 => 3.4.4
    markdown-to-jsx: ^7.4.7 => 7.4.7
    mime: ^4.0.3 => 4.0.3
    monolite: ^0.9.2 => 0.9.2
    object-to-formdata: ^4.5.1 => 4.5.1
    patch-package: ^8.0.0 => 8.0.0
    pusher-js: ^8.4.0-rc2 => 8.4.0-rc2
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    react-error-boundary: ^4.0.13 => 4.0.13
    react-hook-form: ^7.51.4 => 7.51.4
    react-if: ^4.1.5 => 4.1.5
    react-native: 0.74.1 => 0.74.1
    react-native-easy-grid: ^0.2.2 => 0.2.2
    react-native-gesture-handler: ~2.16.2 => 2.16.2
    react-native-keyboard-aware-scroll-view: ^0.9.5 => 0.9.5
    react-native-maps: 1.14.0 => 1.14.0
    react-native-reanimated: ~3.10.1 => 3.10.1
    react-native-safe-area-context: 4.10.1 => 4.10.1
    react-native-screens: 3.31.1 => 3.31.1
    react-native-svg: 15.2.0 => 15.2.0
    react-native-swipe-list-view: ^3.2.9 => 3.2.9
    react-native-toast-message: ^2.2.0 => 2.2.0
    react-native-ui-datepicker: ^2.0.2 => 2.0.2
    react-native-web: ~0.19.11 => 0.19.11
    react-qr-code: ^2.0.12 => 2.0.12
    react-screen-capture: ^1.1.1 => 1.1.1
    react-test-renderer: 18.3.1 => 18.3.1
    recharts: ^2.12.7 => 2.12.7
    string-mask-jedi: ^3.1.1 => 3.1.1
    typescript: ^5.4.5 => 5.4.5
    use-debounce: ^10.0.0 => 10.0.0
    victory-core: ^37.0.2 => 37.0.2
    victory-native: legacy => 37.0.2
    zod: ^3.23.7 => 3.23.7

[megacherry]

Yeah, same here. Not only svg, almost everything is wrapped around.

[megacherry]

downgraded to 1.91.1 and not more spans :)

[CorentinAndre]

This was fixed in 1.98.2 https://github.com/tamagui/tamagui/releases/tag/v1.98.2 I believe

[ntnp]

Yep, fixed. Thanks!