fix: svg logo (#86)

playground/src/components/header/index.tsx

@@ -1,21 +1,20 @@
 "use client"
 
-import { useAppSelector, GITHUB_URL,useSmallScreen} from "@/common"
-import Logo from "@/components/logo"
+import { useAppSelector, GITHUB_URL, useSmallScreen } from "@/common"
 import Network from "./network"
-import { GithubIcon } from "@/components/icons"
+import { GithubIcon, LogoIcon } from "@/components/icons"
 
 import styles from "./index.module.scss"
 import { useMemo } from "react"
 
 const Header = () => {
   const options = useAppSelector(state => state.global.options)
   const { channel } = options
-  const {isSmallScreen} = useSmallScreen()
+  const { isSmallScreen } = useSmallScreen()
 
-  const channelNameText = useMemo(()=>{
+  const channelNameText = useMemo(() => {
     return !isSmallScreen ? `Channel Name：${channel}` : channel
-  },[isSmallScreen,channel])
+  }, [isSmallScreen, channel])
 
   const onClickGithub = () => {
     if (typeof window !== "undefined") {
@@ -25,8 +24,7 @@ const Header = () => {
 
   return <div className={styles.header}>
     <span className={styles.logoWrapper}>
-      <Logo width={24} height={24}></Logo>
-      <span className={styles.text}>ASTRA</span>
+      <LogoIcon ></LogoIcon>
     </span>
     <span className={styles.content}>{channelNameText}</span>
     <span onClick={onClickGithub} className={styles.githubWrapper}>

playground/src/components/icons/index.tsx

@@ -3,3 +3,4 @@ export * from "./cam"
 export * from "./network"
 export * from "./github"
 export * from "./transcription"
+export * from "./logo"

playground/src/components/icons/logo/index.tsx

@@ -0,0 +1,6 @@
+import { IconProps } from "../types"
+import LogoSvg from "@/assets/logo.svg"
+
+export const LogoIcon = (props: IconProps) => {
+  return <LogoSvg {...props}></LogoSvg>
+}

playground/src/components/icons/types.ts

@@ -3,4 +3,6 @@ export interface IconProps {
   height?: number
   color?: string
   viewBox?: string
+  // style?: React.CSSProperties
+  transform?: string
 }

playground/src/components/loginCard/index.module.scss

@@ -47,6 +47,7 @@
       gap: 12px;
 
       .text {
+        margin-top: 12px;
         color: var(--Grey-300, #EAECF0);
         text-align: center;
         font-size: 18px;

playground/src/components/loginCard/index.tsx

@@ -4,8 +4,7 @@ import { version } from "../../../package.json"
 import { useRouter } from 'next/navigation'
 import { message } from "antd"
 import { ChangeEvent, InputHTMLAttributes, useState } from "react"
-import { GithubIcon } from "../icons"
-import Logo from "@/components/logo"
+import { GithubIcon,LogoIcon } from "../icons"
 import { GITHUB_URL, getRandomUserId, useAppDispatch, getRandomChannel } from "@/common"
 import { setOptions } from "@/store/reducers/global"
 import styles from "./index.module.scss"
@@ -53,7 +52,7 @@ const LoginCard = () => {
     </section>
     <section className={styles.content}>
       <div className={styles.title}>
-        <Logo width={64} height={64}></Logo>
+        <LogoIcon transform="scale(1.5 1.5)"></LogoIcon>
         <span className={styles.text}>ASTRA.ai Agents Playground</span>
       </div>
       <div className={styles.section}>