interface CustomExternalLinkIconProps {
  className?: string;
  fill?: string;
  width?: number;
  height?: number;
}

export const CustomExternalLinkIcon = ({ 
  className, 
  fill = "#888888", 
  width = 21, 
  height = 22,
  ...props 
}: CustomExternalLinkIconProps) => (
  <svg 
    width={width} 
    height={height} 
    viewBox="0 0 21 22" 
    fill="none" 
    xmlns="http://www.w3.org/2000/svg" 
    className={className}
    {...props}
  >
    <path 
      d="M0.375 17.0002V5.00024C0.375 2.72207 2.22183 0.875244 4.5 0.875244H7.5C8.12132 0.875244 8.625 1.37892 8.625 2.00024C8.625 2.62156 8.12132 3.12524 7.5 3.12524H4.5C3.46447 3.12524 2.625 3.96471 2.625 5.00024V17.0002C2.625 18.0358 3.46447 18.8752 4.5 18.8752H16.5C17.5355 18.8752 18.375 18.0358 18.375 17.0002V14.0002C18.375 13.3789 18.8787 12.8752 19.5 12.8752C20.1213 12.8752 20.625 13.3789 20.625 14.0002V17.0002C20.625 19.2784 18.7782 21.1252 16.5 21.1252H4.5C2.22183 21.1252 0.375 19.2784 0.375 17.0002Z" 
      fill={fill} 
    />
    <path 
      d="M20.6255 7.49902L20.6196 7.61475C20.5623 8.18202 20.0829 8.62516 19.5005 8.62549C18.9182 8.62574 18.4394 8.18324 18.3813 7.61621L18.3755 7.50049L18.3726 4.71143L10.2954 12.7959C9.85618 13.235 9.14394 13.235 8.70459 12.7959C8.26524 12.3567 8.26543 11.6445 8.70459 11.2051L16.7817 3.12207H14C13.3787 3.12207 12.875 2.61839 12.875 1.99707C12.875 1.37575 13.3787 0.87207 14 0.87207H19.4976C20.1183 0.872449 20.6222 1.37624 20.6226 1.99707L20.6255 7.49902Z" 
      fill={fill} 
    />
  </svg>
)