dify/web/app/components/plugins/card/base/card-icon.tsx

import { cn } from '@langgenius/dify-ui/cn'
import { RiCheckLine, RiCloseLine } from '@remixicon/react'
import AppIcon from '@/app/components/base/app-icon'
import { Mcp } from '@/app/components/base/icons/src/vender/other'
import { shouldUseMcpIcon } from '@/utils/mcp'

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 iconPixelSizeMap = {
  xs: 16,
  tiny: 24,
  small: 32,
  medium: 36,
  large: 40,
}

type IconSize = keyof typeof iconSizeMap

const Icon = ({
  className,
  src,
  installed = false,
  installFailed = false,
  size = 'large',
}: {
  className?: string
  src:
    | string
    | {
        content: string
        background: string
      }
  installed?: boolean
  installFailed?: boolean
  size?: IconSize
}) => {
  const iconClassName =
    'flex justify-center items-center gap-2 absolute bottom-[-4px] right-[-4px] w-[18px] h-[18px] rounded-full border-2 border-components-panel-bg'
  if (typeof src === 'object') {
    return (
      <div className={cn('relative', className)}>
        <AppIcon
          size={size}
          iconType="emoji"
          icon={src.content}
          background={src.background}
          className="rounded-md"
          innerIcon={
            shouldUseMcpIcon(src) ? (
              <Mcp className="size-8 text-text-primary-on-surface" />
            ) : undefined
          }
        />
      </div>
    )
  }

  return (
    <div className={cn('relative shrink-0 rounded-md', iconSizeMap[size], className)}>
      <img
        alt=""
        className="size-full rounded-md object-contain object-center"
        decoding="async"
        height={iconPixelSizeMap[size]}
        loading="lazy"
        src={src}
        width={iconPixelSizeMap[size]}
        onError={({ currentTarget }) => {
          currentTarget.style.display = 'none'
        }}
      />
      {installed && (
        <div className={cn(iconClassName, 'bg-state-success-solid')}>
          <RiCheckLine className="size-3 text-text-primary-on-surface" />
        </div>
      )}
      {installFailed && (
        <div className={cn(iconClassName, 'bg-state-destructive-solid')}>
          <RiCloseLine className="size-3 text-text-primary-on-surface" />
        </div>
      )}
    </div>
  )
}

export default Icon