chore: convert inline spinner to svg (#3432)

* chore: convert inline spinner to svg

* feat: inline spinner outline

src/lib/assets/svg/inline_spinner.svg

@@ -0,0 +1,34 @@
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <mask id="mask">
+        <circle cx="12" cy="12" r="10" fill="black" stroke="black" stroke-width="2" />
+        <rect width="12" height="12" fill="white" stroke-width="0" />
+        <circle cx="2" cy="12" r="1" fill="white" stroke-width="0" />
+        <circle cx="12" cy="2" r="1" fill="white" stroke-width="0" />
+      </mask>
+      <circle
+        cx="12"
+        cy="12"
+        r="6"
+        stroke="none"
+      />
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        fill="none"
+      />
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        fill="none"
+        mask="url(#mask)"
+      />
+    </svg>

src/lib/assets/svg/spinner.svg

@@ -1,12 +1,11 @@
     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <mask id="mask">
-        <rect width="24" height="24" fill="white" stroke-width="0" />
+        <circle cx="12" cy="12" r="10" stroke="white" stroke-width="2" />
         <rect width="12" height="12" fill="black" stroke-width="0" />
         <circle cx="2" cy="12" r="1" fill="white" stroke-width="0" />
         <circle cx="12" cy="2" r="1" fill="white" stroke-width="0" />
       </mask>
       <circle
-        id="circle"
         cx="12"
         cy="12"
         r="10"

src/lib/components/Swap/Toolbar/Caption.tsx

@@ -3,8 +3,7 @@ import { Currency, TradeType } from '@uniswap/sdk-core'
 import useUSDCPrice from 'hooks/useUSDCPrice'
 import Tooltip from 'lib/components/Tooltip'
 import { WrapType } from 'lib/hooks/swap/useWrapCallback'
-import { AlertTriangle, Icon, Info } from 'lib/icons'
+import { AlertTriangle, Icon, Info, InlineSpinner } from 'lib/icons'
-import InlineSpinner from 'lib/icons/InlineSpinner'
 import { ThemedText } from 'lib/theme'
 import { ReactNode, useCallback, useMemo, useState } from 'react'
 import { InterfaceTrade } from 'state/routing/types'

src/lib/icons/InlineSpinner.tsx

@@ -1,57 +0,0 @@
-import styled, { keyframes } from 'lib/theme'
-
-const rotate = keyframes`
-from {
-  transform: rotate(0deg);
-}
-to {
-  transform: rotate(360deg);
-}
-`
-
-const Wrapper = styled.div`
-  align-items: center;
-  display: flex;
-  height: 16px;
-  transition: 250ms ease color;
-  width: 16px;
-`
-
-const InnerDot = styled.div`
-  background-color: ${({ theme }) => theme.outline};
-  border-radius: 50%;
-  height: 8px;
-  margin-left: 3px;
-  min-height: 8px;
-  min-width: 8px;
-  position: relative;
-  transition: 250ms ease background-color;
-  width: 8px;
-`
-
-const OuterRing = styled.div`
-  animation: ${rotate} 1s cubic-bezier(0.83, 0, 0.17, 1) infinite;
-  background: transparent;
-  border-bottom: 1px solid transparent;
-  border-left: 2px solid ${({ theme }) => theme.primary};
-  border-radius: 50%;
-  border-right: 1px solid transparent;
-  border-top: 1px solid transparent;
-  height: 14px;
-  left: -3px;
-  position: relative;
-  top: -3px;
-  transform: translateZ(0);
-  transition: 250ms ease border-color;
-  width: 14px;
-`
-
-export default function InlineSpinner() {
-  return (
-    <Wrapper>
-      <InnerDot>
-        <OuterRing />
-      </InnerDot>
-    </Wrapper>
-  )
-}

src/lib/icons/index.tsx

@@ -1,6 +1,7 @@
 import { ReactComponent as RouterIcon } from 'lib/assets/svg/auto_router.svg'
 import { ReactComponent as CheckIcon } from 'lib/assets/svg/check.svg'
 import { ReactComponent as ExpandoIcon } from 'lib/assets/svg/expando.svg'
+import { ReactComponent as InlineSpinnerIcon } from 'lib/assets/svg/inline_spinner.svg'
 import { ReactComponent as LogoIcon } from 'lib/assets/svg/logo.svg'
 import { ReactComponent as SpinnerIcon } from 'lib/assets/svg/spinner.svg'
 import { ReactComponent as WalletIcon } from 'lib/assets/svg/wallet.svg'
@@ -133,3 +134,11 @@ export const Spinner = styled(icon(SpinnerIcon))<{ color?: Color }>`
   stroke-linecap: round;
   stroke-width: 2;
 `
+
+export const InlineSpinner = styled(icon(InlineSpinnerIcon))<{ color?: Color }>`
+  animation: ${rotate} 1s cubic-bezier(0.83, 0, 0.17, 1) infinite;
+  color: ${({ color = 'active', theme }) => theme[color]};
+  fill: ${({ theme }) => theme.outline};
+  stroke: ${({ theme }) => theme.outline};
+  stroke-linecap: round;
+`