chore: Fix svg render (#1011)

coinbase · Aug 8, 2024 · c14ca17 · c14ca17
1 parent 30fe3ae
commit c14ca17
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 12 deletions.
diff --git a/.changeset/silver-poems-flash.md b/.changeset/silver-poems-flash.md
@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+-**chore**: Fix svg render. By @cpcramer #1011
diff --git a/src/internal/svg/baseNameSvg.tsx b/src/internal/svg/baseNameSvg.tsx
@@ -5,9 +5,9 @@ export const baseNameSvg = (
     data-testid="ockbaseNameSvg"
     role="img"
     aria-label="ock-base-name"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
+    width="100%"
+    height="100%"
+    viewBox="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     className="h-full w-full"

diff --git a/src/internal/svg/disconnectSvg.tsx b/src/internal/svg/disconnectSvg.tsx
@@ -4,9 +4,9 @@ export const disconnectSvg = (
   <svg
     role="img"
     aria-label="ock-disconnect-svg"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
+    width="100%"
+    height="100%"
+    viewBox="0 0 20 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >

diff --git a/src/internal/svg/walletSvg.tsx b/src/internal/svg/walletSvg.tsx
@@ -4,9 +4,9 @@ export const walletSvg = (
   <svg
     role="img"
     aria-label="ock-wallet-svg"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
+    width="100%"
+    height="100%"
+    viewBox="0 0 20 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >

diff --git a/src/wallet/components/WalletDropdownBaseName.tsx b/src/wallet/components/WalletDropdownBaseName.tsx
@@ -38,7 +38,7 @@ export function WalletDropdownBaseName({
       target="_blank"
       rel="noopener noreferrer"
     >
-      <div className="-translate-y-1/2 absolute top-1/2 left-4 flex h-5 w-5 items-center justify-center">
+      <div className="-translate-y-1/2 absolute top-1/2 left-4 flex h-4 w-4 items-center justify-center">
         {baseNameSvg}
       </div>
       <div className="flex w-full items-center pl-6">

diff --git a/src/wallet/components/WalletDropdownDisconnect.tsx b/src/wallet/components/WalletDropdownDisconnect.tsx
@@ -24,7 +24,7 @@ export function WalletDropdownDisconnect({
       )}
       onClick={handleDisconnect}
     >
-      <div className="-translate-y-1/2 absolute top-1/2 left-4 flex h-5 w-5 items-center justify-center">
+      <div className="-translate-y-1/2 absolute top-1/2 left-4 flex h-4 w-4 items-center justify-center">
         {disconnectSvg}
       </div>
       <span className={cn(dsText.body, 'pl-6')}>{text}</span>

diff --git a/src/wallet/components/WalletDropdownLink.tsx b/src/wallet/components/WalletDropdownLink.tsx
@@ -35,7 +35,7 @@ export function WalletDropdownLink({
       target={target}
       rel={rel}
     >
-      <div className="-translate-y-1/2 absolute top-1/2 left-4 flex h-5 w-5 items-center justify-center">
+      <div className="-translate-y-1/2 absolute top-1/2 left-4 flex h-4 w-4 items-center justify-center">
         {iconSvg}
       </div>
       <span className={cn(text.body, 'pl-6')}>{children}</span>