From 1b3f4f1f2a9ecdcbf15d829b985aeb1a24500978 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 21 Nov 2024 18:00:13 +0800
Subject: [PATCH] feat: support icon size

---
 web/app/components/plugins/card/base/card-icon.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/app/components/plugins/card/base/card-icon.tsx b/web/app/components/plugins/card/base/card-icon.tsx
index 34ff0d8fbc..3587f3fd0d 100644
--- a/web/app/components/plugins/card/base/card-icon.tsx
+++ b/web/app/components/plugins/card/base/card-icon.tsx
@@ -2,12 +2,19 @@ import { RiCheckLine, RiCloseLine } from '@remixicon/react'
 import AppIcon from '@/app/components/base/app-icon'
 import cn from '@/utils/classnames'
 
+const iconSizeMap = {
+  xs: 'w-4 h-4 text-base',
+  tiny: 'w-6 h-6 text-base',
+  small: 'w-8 h-8',
+  medium: 'w-9 h-9',
+  large: 'w-10 h-10',
+}
 const Icon = ({
   className,
   src,
   installed = false,
   installFailed = false,
-  size,
+  size = 'large',
 }: {
   className?: string
   src: string | {
@@ -23,7 +30,7 @@ const Icon = ({
     return (
       <div className={cn('relative', className)}>
         <AppIcon
-          size={size || 'large'}
+          size={size}
           iconType={'emoji'}
           icon={src.content}
           background={src.background}
@@ -32,9 +39,10 @@ const Icon = ({
       </div>
     )
   }
+
   return (
     <div
-      className={cn('shrink-0 relative w-10 h-10 rounded-md bg-center bg-no-repeat bg-contain', className)}
+      className={cn('shrink-0 relative rounded-md bg-center bg-no-repeat bg-contain', iconSizeMap[size], className)}
       style={{
         backgroundImage: `url(${src})`,
       }}