fix: update spinner to use svg instead

packages/design-system/lib/components/Spinner/Spinner.tsx

@@ -1,21 +1,34 @@
-import { VariantProps } from 'class-variance-authority'
 import styles from './spinner.module.css'
+import { VariantProps } from 'class-variance-authority'
 
 import { variants } from './variants'
 
-type SpinnerProps = VariantProps<typeof variants>
+export interface SpinnerProps extends VariantProps<typeof variants> {
+  size?: number
+}
 
-export function Spinner({ color, size }: SpinnerProps) {
+export function Spinner({ type, size = 20 }: SpinnerProps) {
   const classNames = variants({
-    color,
-    size,
+    type,
   })
 
   return (
-    <div className={classNames}>
-      {[...Array(8)].map((_, i) => (
-        <div key={i} className={styles.dot} />
-      ))}
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 20 21"
+      fill="none"
+      className={classNames}
+    >
+      <circle className={styles.dot} cx="10" cy="2.64147" r="1.73913" />
+      <circle className={styles.dot} cx="16.087" cy="5.25018" r="1.73913" />
+      <circle className={styles.dot} cx="18.2609" cy="10.9023" r="1.73913" />
+      <circle className={styles.dot} cx="16.087" cy="16.5545" r="1.73913" />
+      <circle className={styles.dot} cx="10" cy="19.1632" r="1.73913" />
+      <circle className={styles.dot} cx="3.91304" cy="16.5545" r="1.73913" />
+      <circle className={styles.dot} cx="1.73913" cy="10.9023" r="1.73913" />
+      <circle className={styles.dot} cx="3.91304" cy="5.25018" r="1.73913" />
+    </svg>
   )
 }