fix: Extract the part of the svg icon that contains the id as the com…

…mon component
bnb-chain · Nov 28, 2024 · e2a8ecd · e2a8ecd
1 parent bcf65ef
commit e2a8ecd
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 55 deletions.
diff --git a/apps/canonical-bridge-ui/core/components/icons/SvgDefs.tsx b/apps/canonical-bridge-ui/core/components/icons/SvgDefs.tsx
@@ -0,0 +1,69 @@
+import { Icon } from '@bnb-chain/space';
+
+export function SvgDefs() {
+  return (
+    <Icon
+      position={'absolute'}
+      w={0}
+      h={0}
+      viewBox="0 0 440 280"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <clipPath id="clip0_9685_21608">
+        <rect width="18" height="15" fill="white" transform="translate(3 4)" />
+      </clipPath>
+
+      <mask id="mask0_18_3" maskUnits="userSpaceOnUse" x="0" y="0" width="65" height="65">
+        <path
+          d="M7.30721 0C3.27132 0 0 3.59886 0 8.03839V56.9616C0 61.4011 3.27132 65 7.30721 65H57.6928C61.7283 65 65 61.4011 65 56.9616V8.03839C65 3.59886 61.7283 0 57.6928 0H7.30721Z"
+          fill="white"
+        />
+      </mask>
+
+      <linearGradient
+        id="paint0_linear_18_3"
+        x1="537.383"
+        y1="266.088"
+        x2="6244.77"
+        y2="6544.28"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#145ECC" />
+        <stop offset="1" stopColor="#1260CC" />
+      </linearGradient>
+
+      <clipPath id="clip0_18_3">
+        <rect width="65" height="65" fill="white" />
+      </clipPath>
+
+      <linearGradient
+        id="paint0_linear_7476_132116"
+        x1="4.77107"
+        y1="21.3854"
+        x2="7.65309"
+        y2="0.538518"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.26" stopColor="#48FF91" />
+        <stop offset="0.66" stopColor="#0094FF" />
+        <stop offset="0.8" stopColor="#0038FF" />
+        <stop offset="0.89" stopColor="#0500FF" />
+      </linearGradient>
+
+      <linearGradient
+        id="paint1_linear_7476_132116"
+        x1="11.7182"
+        y1="21.3853"
+        x2="17.1746"
+        y2="1.64876"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.26" stopColor="#48FF91" />
+        <stop offset="0.66" stopColor="#0094FF" />
+        <stop offset="0.8" stopColor="#0038FF" />
+        <stop offset="0.89" stopColor="#0500FF" />
+      </linearGradient>
+    </Icon>
+  );
+}
diff --git a/apps/canonical-bridge-ui/core/components/icons/wallets/PhantomIcon.tsx b/apps/canonical-bridge-ui/core/components/icons/wallets/PhantomIcon.tsx
@@ -10,11 +10,6 @@ export function PhantomIcon(props: IconProps) {
           fill="#AB9FF2"
         />
       </g>
-      <defs>
-        <clipPath id="clip0_9685_21608">
-          <rect width="18" height="15" fill="white" transform="translate(3 4)" />
-        </clipPath>
-      </defs>
     </Icon>
   );
 }
diff --git a/apps/canonical-bridge-ui/core/components/icons/wallets/TronLinkIcon.tsx b/apps/canonical-bridge-ui/core/components/icons/wallets/TronLinkIcon.tsx
@@ -8,12 +8,6 @@ export function TronLinkIcon(props: IconProps) {
           d="M7.30721 0C3.27132 0 0 3.59886 0 8.03839V56.9616C0 61.4011 3.27132 65 7.30721 65H57.6928C61.7283 65 65 61.4011 65 56.9616V8.03839C65 3.59886 61.7283 0 57.6928 0H7.30721Z"
           fill="url(#paint0_linear_18_3)"
         />
-        <mask id="mask0_18_3" maskUnits="userSpaceOnUse" x="0" y="0" width="65" height="65">
-          <path
-            d="M7.30721 0C3.27132 0 0 3.59886 0 8.03839V56.9616C0 61.4011 3.27132 65 7.30721 65H57.6928C61.7283 65 65 61.4011 65 56.9616V8.03839C65 3.59886 61.7283 0 57.6928 0H7.30721Z"
-            fill="white"
-          />
-        </mask>
         <g mask="url(#mask0_18_3)">
           <path
             fillRule="evenodd"
@@ -23,22 +17,6 @@ export function TronLinkIcon(props: IconProps) {
           />
         </g>
       </g>
-      <defs>
-        <linearGradient
-          id="paint0_linear_18_3"
-          x1="537.383"
-          y1="266.088"
-          x2="6244.77"
-          y2="6544.28"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#145ECC" />
-          <stop offset="1" stopColor="#1260CC" />
-        </linearGradient>
-        <clipPath id="clip0_18_3">
-          <rect width="65" height="65" fill="white" />
-        </clipPath>
-      </defs>
     </Icon>
   );
 }
diff --git a/apps/canonical-bridge-ui/core/components/icons/wallets/TrustWalletIcon.tsx b/apps/canonical-bridge-ui/core/components/icons/wallets/TrustWalletIcon.tsx
@@ -16,34 +16,6 @@ export function TrustWalletIcon(props: IconProps) {
         d="M18.6662 6.66673L12.0003 4.5V19.5C16.7622 17.4998 18.6662 13.6665 18.6662 11.5001V6.66673Z"
         fill="url(#paint1_linear_7476_132116)"
       />
-      <defs>
-        <linearGradient
-          id="paint0_linear_7476_132116"
-          x1="4.77107"
-          y1="21.3854"
-          x2="7.65309"
-          y2="0.538518"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0.26" stopColor="#48FF91" />
-          <stop offset="0.66" stopColor="#0094FF" />
-          <stop offset="0.8" stopColor="#0038FF" />
-          <stop offset="0.89" stopColor="#0500FF" />
-        </linearGradient>
-        <linearGradient
-          id="paint1_linear_7476_132116"
-          x1="11.7182"
-          y1="21.3853"
-          x2="17.1746"
-          y2="1.64876"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0.26" stopColor="#48FF91" />
-          <stop offset="0.66" stopColor="#0094FF" />
-          <stop offset="0.8" stopColor="#0038FF" />
-          <stop offset="0.89" stopColor="#0500FF" />
-        </linearGradient>
-      </defs>
     </Icon>
   );
 }
diff --git a/apps/canonical-bridge-ui/pages/_app.tsx b/apps/canonical-bridge-ui/pages/_app.tsx
@@ -4,6 +4,7 @@ import Head from 'next/head';
 import { AppProps } from 'next/app';
 
 import { ThemeProvider } from '@/core/components/ThemeProvider';
+import { SvgDefs } from '@/core/components/icons/SvgDefs';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -23,6 +24,7 @@ export default function App({ Component, ...restProps }: AppProps) {
       </Head>
       <ThemeProvider>
         <QueryClientProvider client={queryClient}>
+          <SvgDefs />
           <Component {...restProps.pageProps} />
         </QueryClientProvider>
       </ThemeProvider>