fix: remove flicker on custom icons

src/components/BinaryEditButton.tsx

@@ -6,7 +6,7 @@ import { Modal } from "@/components/Modal"
 import { useGenericSynchronizeInput } from "@/components/useSynchroniseInput"
 import { NOTIN } from "@polkadot-api/react-builder"
 import { Download, FileUp } from "lucide-react"
-import { ComponentProps, FC, useMemo, useState } from "react"
+import { ComponentProps, FC, useCallback, useMemo, useState } from "react"
 import { twMerge } from "tailwind-merge"
 // @ts-expect-error save-as typings not available
 import { saveAs } from "save-as"
@@ -37,7 +37,7 @@ export const BinaryEditButton: FC<
           "cursor-pointer hover:text-polkadot-500",
           iconProps?.className,
         )}
-        onClick={() => setOpen(true)}
+        onClick={useCallback(() => setOpen(true), [])}
       />
       <BinaryEditModal {...props} open={open} onClose={() => setOpen(false)} />
     </>

src/components/BinaryInput.tsx

@@ -2,12 +2,12 @@ import { byteArraysAreEqual } from "@/utils/byteArray"
 import { NOTIN } from "@polkadot-api/react-builder"
 import { Binary } from "@polkadot-api/substrate-bindings"
 import { FileUp } from "lucide-react"
+import { fromHex, toHex } from "polkadot-api/utils"
 import { FC, useState } from "react"
 import { twMerge } from "tailwind-merge"
 import { SwitchBinary } from "./Icons"
 import { TextInputField } from "./TextInputField"
 import { useGenericSynchronizeInput } from "./useSynchroniseInput"
-import { fromHex, toHex } from "polkadot-api/utils"
 
 export const BinaryInput: React.FC<{
   encodedValue: Uint8Array | NOTIN
@@ -88,6 +88,7 @@ export const BinaryInput: React.FC<{
                 setLocalInput(toHex(Binary.fromText(inputValue)))
               }
             }}
+            tabIndex={-1}
           >
             <SwitchBinary size={24} />
           </button>

src/components/Icons.tsx

@@ -12,7 +12,7 @@ import {
   LucideProps,
   User,
 } from "lucide-react"
-import { FC, useEffect, useRef } from "react"
+import { FC, useCallback, useEffect, useRef } from "react"
 import { Props, ReactSVG } from "react-svg"
 import { twMerge } from "tailwind-merge"
 import binarySvg from "./icons/binary.svg"
@@ -36,17 +36,16 @@ const CustomIcon: FC<
     ref.current.setAttribute("height", String(size))
   }, [size])
 
-  return (
-    <ReactSVG
-      {...props}
-      src={url}
-      beforeInjection={(svg) => {
-        ref.current = svg
-        svg.setAttribute("width", String(size))
-        svg.setAttribute("height", String(size))
-      }}
-    />
+  const beforeInjection = useCallback(
+    (svg: SVGSVGElement) => {
+      ref.current = svg
+      svg.setAttribute("width", String(size))
+      svg.setAttribute("height", String(size))
+    },
+    [size],
   )
+
+  return <ReactSVG {...props} src={url} beforeInjection={beforeInjection} />
 }
 
 const customIcon = (url: string) => (props: CustomIconProps) => (