Imported svg with Gradients definitions not work, expo web

[angelos3lex]

Hello, I am testing in latest expo and with latest version of the library.

Result if i only render the unselected icon:

Result if only render the selected icon:

Result when I render both:

The svgs:

orders.svg:

<svg viewBox="0 0 137 143" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_468_10198)">
<path d="M29.0206 8.1123C29.3597 10.2071 29.4541 12.4574 30.1107 14.5263C31.763 19.7353 35.2822 22.154 40.6898 22.154C54.2773 22.154 67.8692 22.154 81.4567 22.154C88.9758 22.154 93.6237 17.3036 93.422 9.67153C93.4092 9.11435 93.422 8.55718 93.422 8.19004C99.7738 8.19004 106.091 7.64582 112.271 8.34122C118.808 9.07548 122.846 13.9907 123.717 20.5516C123.923 22.1151 124.043 23.7046 124.048 25.2854C124.069 48.026 124.065 70.7709 124.061 93.5115C124.061 94.1464 124.009 94.777 123.97 95.602C110.795 91.3519 99.4562 93.9175 91.4908 105.484C84.1562 116.135 85.3708 127.141 92.6882 137.883H90.3621C65.7577 137.883 41.1576 137.887 16.5532 137.87C15.0554 137.87 13.5447 137.822 12.0641 137.602C4.4892 136.492 0.605202 132.203 0.115947 124.476C0.0344041 123.184 0.00865381 121.889 0.00865381 120.593C7.03868e-05 88.7129 -0.00851304 56.8285 0.0258207 24.9485C0.0258207 22.6594 0.163155 20.3356 0.557993 18.081C1.56225 12.3624 4.63512 8.79905 10.3903 8.24619C16.5961 7.65446 22.9006 8.1123 29.0163 8.1123H29.0206ZM62.3501 54.1938C72.7832 54.1938 83.2206 54.2154 93.6538 54.1809C96.4348 54.1722 98.7781 51.9349 98.8253 49.4427C98.8768 46.7346 96.6494 44.6009 93.6366 44.5966C73.0536 44.5793 52.4705 44.5836 31.8875 44.5966C28.8532 44.5966 26.746 46.6741 26.7932 49.4945C26.8447 52.5266 28.6429 54.1938 31.9046 54.1981C42.0545 54.2068 52.2044 54.1981 62.3501 54.1981V54.1938ZM61.7106 72.2481C51.3504 72.2481 40.9859 72.2308 30.6257 72.2567C27.0293 72.2653 24.8963 75.1031 26.0379 78.2474C26.8662 80.528 28.6344 81.828 31.0849 81.8367C37.3723 81.8583 43.6596 81.8453 49.9513 81.8453C64.1697 81.8453 78.3925 81.8324 92.6109 81.8626C94.2847 81.8626 95.7396 81.6121 96.6795 80.0572C97.7009 78.3684 98.1215 76.5975 97.1902 74.7446C96.246 72.8657 94.6108 72.2308 92.5809 72.2351C82.2893 72.261 72.0021 72.2481 61.7106 72.2481ZM45.239 108.659C45.239 108.659 45.239 108.642 45.239 108.633C50.02 108.633 54.8052 108.702 59.5862 108.603C62.1483 108.551 64.4573 106.041 64.38 103.709C64.2942 101.152 62.1612 99.053 59.436 99.0401C50.1573 99.0012 40.8786 99.0012 31.5999 99.0401C28.7803 99.053 26.7117 101.282 26.7975 104.003C26.8919 106.897 28.6215 108.629 31.5356 108.646C36.1019 108.676 40.6726 108.655 45.239 108.655V108.659Z" fill="url(#paint0_linear_468_10198)"/>
<path d="M94.7439 121.919C94.4521 110.499 103.817 100.582 115.151 100.319C126.996 100.042 136.683 109.272 136.996 121.128C137.305 132.89 127.889 142.768 116.151 142.992C104.602 143.217 95.053 133.814 94.7482 121.915L94.7439 121.919ZM112.447 127.24C110.087 124.843 107.825 122.575 105.598 120.269C104.576 119.211 103.452 118.675 102.25 119.785C100.928 121.003 101.473 122.182 102.585 123.288C105.126 125.81 107.632 128.372 110.151 130.916C112.198 132.98 112.731 133.011 114.872 130.903C118.752 127.085 122.597 123.232 126.455 119.392C127.473 118.381 128.485 117.371 129.498 116.36C130.494 115.371 130.837 114.235 129.824 113.134C128.696 111.911 127.528 112.335 126.477 113.371C126.018 113.825 125.563 114.278 125.104 114.732C120.932 118.852 116.76 122.973 112.447 127.24Z" fill="#8891AA"/>
<path d="M61.9035 14.3999C56.6848 14.3999 51.4661 14.4215 46.2474 14.3913C42.2003 14.3697 39.3077 11.3765 39.2733 7.25162C39.2347 3.15271 42.1402 0.0385631 46.1529 0.0256055C56.6633 -0.00894804 67.1695 -0.0132672 77.6799 0.0256055C81.6282 0.0428823 84.3535 3.02313 84.3706 7.16092C84.3878 11.411 81.6282 14.3697 77.5597 14.3869C72.341 14.4129 67.1222 14.3956 61.9035 14.3956V14.3999Z" fill="#8891AA"/>
</g>
<defs>
<linearGradient id="paint0_linear_468_10198" x1="62.0325" y1="7.94336" x2="62.0325" y2="137.883" gradientUnits="userSpaceOnUse">
<stop offset="0.5" stop-color="#CFD3DD"/>
<stop offset="1" stop-color="#8891AA"/>
</linearGradient>
<clipPath id="clip0_468_10198">
<rect width="137" height="143" fill="white"/>
</clipPath>
</defs>
</svg>

orders_selected.svg:

<svg viewBox="0 0 139 143" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_468_10603)">
<path d="M29.2819 8.1123C29.624 10.2071 29.7192 12.4574 30.3818 14.5263C32.049 19.7353 35.5998 22.154 41.0561 22.154C54.766 22.154 68.4802 22.154 82.19 22.154C89.7768 22.154 94.4666 17.3036 94.2631 9.67153C94.2501 9.11435 94.2631 8.55718 94.2631 8.19004C100.672 8.19004 107.046 7.64582 113.282 8.34122C119.877 9.07548 123.952 13.9907 124.831 20.5516C125.039 22.1151 125.16 23.7046 125.164 25.2854C125.186 48.026 125.182 70.7709 125.177 93.5115C125.177 94.1464 125.125 94.777 125.086 95.602C111.792 91.3519 100.352 93.9175 92.3144 105.484C84.9138 116.135 86.1393 127.141 93.5226 137.883H91.1755C66.3496 137.883 41.5281 137.887 16.7022 137.87C15.1909 137.87 13.6666 137.822 12.1727 137.602C4.52961 136.492 0.610641 132.203 0.116982 124.476C0.034705 123.184 0.00872292 121.889 0.00872292 120.593C6.22291e-05 88.7129 -0.00859847 56.8285 0.0260443 24.9485C0.0260443 22.6594 0.164615 20.3356 0.563007 18.081C1.57631 12.3624 4.67684 8.79905 10.4838 8.24619C16.7455 7.65446 23.1068 8.1123 29.2775 8.1123H29.2819ZM62.9113 54.1938C73.4384 54.1938 83.9698 54.2154 94.4969 54.1809C97.303 54.1722 99.6673 51.9349 99.715 49.4427C99.7669 46.7346 97.5195 44.6009 94.4796 44.5966C73.7112 44.5793 52.9429 44.5836 32.1745 44.5966C29.113 44.5966 26.9868 46.6741 27.0344 49.4945C27.0864 52.5266 28.9008 54.1938 32.1919 54.1981C42.4331 54.2068 52.6744 54.1981 62.9113 54.1981V54.1938ZM62.2661 72.2481C51.8127 72.2481 41.3549 72.2308 30.9014 72.2567C27.2726 72.2653 25.1204 75.1031 26.2723 78.2474C27.108 80.528 28.8921 81.828 31.3648 81.8367C37.7087 81.8583 44.0527 81.8453 50.401 81.8453C64.7474 81.8453 79.0982 81.8324 93.4446 81.8626C95.1335 81.8626 96.6014 81.6121 97.5498 80.0572C98.5804 78.3684 99.0048 76.5975 98.0651 74.7446C97.1124 72.8657 95.4626 72.2308 93.4143 72.2351C83.0301 72.261 72.6503 72.2481 62.2661 72.2481ZM45.6462 108.659C45.6462 108.659 45.6462 108.642 45.6462 108.633C50.4703 108.633 55.2986 108.702 60.1226 108.603C62.7078 108.551 65.0375 106.041 64.9596 103.709C64.873 101.152 62.7208 99.053 59.971 99.0401C50.6088 99.0012 41.2466 99.0012 31.8844 99.0401C29.0394 99.053 26.9521 101.282 27.0387 104.003C27.134 106.897 28.8791 108.629 31.8195 108.646C36.4269 108.676 41.0388 108.655 45.6462 108.655V108.659Z" fill="url(#paint0_linear_468_10603)"/>
<path d="M95.5965 121.919C95.3021 110.499 104.751 100.582 116.187 100.319C128.139 100.042 137.913 109.272 138.229 121.128C138.541 132.89 129.04 142.768 117.196 142.992C105.543 143.217 95.9083 133.814 95.6009 121.915L95.5965 121.919ZM113.459 127.24C111.078 124.843 108.795 122.575 106.548 120.269C105.517 119.211 104.383 118.675 103.17 119.785C101.837 121.003 102.387 122.182 103.508 123.288C106.072 125.81 108.601 128.372 111.142 130.916C113.208 132.98 113.745 133.011 115.906 130.903C119.821 127.085 123.7 123.232 127.593 119.392C128.62 118.381 129.642 117.371 130.664 116.36C131.668 115.371 132.015 114.235 130.993 113.134C129.854 111.911 128.676 112.335 127.615 113.371C127.152 113.825 126.693 114.278 126.229 114.732C122.02 118.852 117.811 122.973 113.459 127.24Z" fill="#415BE7"/>
<path d="M62.4608 14.3999C57.1951 14.3999 51.9294 14.4215 46.6637 14.3913C42.5801 14.3697 39.6615 11.3765 39.6268 7.25162C39.5879 3.15271 42.5195 0.0385631 46.5684 0.0256055C57.1734 -0.00894804 67.7741 -0.0132672 78.3791 0.0256055C82.363 0.0428823 85.1128 3.02313 85.1301 7.16092C85.1475 11.411 82.363 14.3697 78.2579 14.3869C72.9922 14.4129 67.7265 14.3956 62.4608 14.3956V14.3999Z" fill="#415BE7"/>
</g>
<defs>
<linearGradient id="paint0_linear_468_10603" x1="62.591" y1="7.94336" x2="62.591" y2="137.883" gradientUnits="userSpaceOnUse">
<stop stop-color="#C9D0F8"/>
<stop offset="1" stop-color="#415BE7"/>
</linearGradient>
<clipPath id="clip0_468_10603">
<rect width="138.233" height="143" fill="white"/>
</clipPath>
</defs>
</svg>

My metro.config.js (exactly as suggested on the readme of the library):

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer/expo")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };

  return config;
})();

package.json:

{
  "name": "svggradientsproblem",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/native": "^7.0.14",
    "expo": "~52.0.28",
    "expo-blur": "~14.0.3",
    "expo-constants": "~17.0.5",
    "expo-font": "~13.0.3",
    "expo-haptics": "~14.0.1",
    "expo-linking": "~7.0.5",
    "expo-router": "~4.0.17",
    "expo-splash-screen": "~0.29.21",
    "expo-status-bar": "~2.0.1",
    "expo-symbols": "~0.2.1",
    "expo-system-ui": "~4.0.7",
    "expo-web-browser": "~14.0.2",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.6",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.4.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.5"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.3",
    "react-native-svg-transformer": "^1.5.0",
    "react-test-renderer": "18.3.1",
    "typescript": "^5.3.3"
  },
  "private": true
}

As you can see, when I render more than 1 svg having a gradient definition, things mess up and no svg applies its gradient well. This must be a bug on how the lib internally transforms the svgs, somehow messing one with the other.