Update icons for zap buttons

src/components/ui/button/button.tsx

@@ -23,6 +23,8 @@ interface IButton {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** A predefined button size. */
   size?: ButtonSizes;
+  /** A predefined icon size. */
+  iconSize?: number;
   /** Text inside the button. Takes precedence over `children`. */
   text?: React.ReactNode;
   /** Makes the button into a navlink, if provided. */
@@ -40,6 +42,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
     children,
     disabled = false,
     icon,
+    iconSize = 4,
     onClick,
     size = 'md',
     text,
@@ -63,7 +66,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
       return null;
     }
 
-    return <Icon src={icon} className='h-4 w-4' />;
+    return <Icon src={icon} className={`h-${iconSize} w-${iconSize}`} />;
   };
 
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback((event) => {

src/components/ui/icon/icon.tsx

@@ -22,19 +22,24 @@ interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
 }
 
 /** Renders and SVG icon with optional counter. */
-const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, ...filteredProps }): JSX.Element => (
-  <div
-    className='relative flex shrink-0 flex-col'
-    data-testid={filteredProps['data-testid'] || 'icon'}
-  >
-    {count ? (
-      <span className='absolute -right-3 -top-2 flex h-5 min-w-[20px] shrink-0 items-center justify-center whitespace-nowrap break-words'>
-        <Counter count={count} countMax={countMax} />
-      </span>
-    ) : null}
+const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, ...filteredProps }): JSX.Element => {
 
-    <SvgIcon src={src} size={size} alt={alt} {...filteredProps} />
-  </div>
-);
+  const isSVG = src.endsWith('.svg');
+
+  return (
+    <div
+      className='relative flex shrink-0 flex-col'
+      data-testid={filteredProps['data-testid'] || 'icon'}
+    >
+      {count ? (
+        <span className='absolute -right-3 -top-2 flex h-5 min-w-[20px] shrink-0 items-center justify-center whitespace-nowrap break-words'>
+          <Counter count={count} countMax={countMax} />
+        </span>
+      ) : null}
+      {isSVG ? (<SvgIcon src={src} size={size} alt={alt} {...filteredProps} />) : (<img src={src} width={size} height={size} alt={alt} {...filteredProps} />) }
+
+    </div>
+  );
+};
 
 export default Icon;

src/components/ui/icon/index.ts

@@ -0,0 +1,11 @@
+
+const icons = {
+  coinIcon: require('../../../assets/icons/zapIcons/coin.png'),
+  coinStack: require('../../../assets/icons/zapIcons/coinStack.png'),
+  pileCoin: require('../../../assets/icons/zapIcons/pileCoins.png'),
+  moneyBag: require('../../../assets/icons/zapIcons/moneyBag.png'),
+  chestIcon: require('../../../assets/icons/zapIcons/blueChest.png'),
+};
+
+
+export default icons;

src/features/zap/components/zap-pay-request-form.tsx

@@ -7,6 +7,8 @@ import Account from 'soapbox/components/account';
 import { Stack, Button, Input } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
+import icons from '../../../components/ui/icon';
+
 import type {  Account as AccountEntity, Status as StatusEntity   } from 'soapbox/types/entities';
 
 interface IZapPayRequestForm {
@@ -66,11 +68,11 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => {
       </div>
 
       <div className='flex justify-center '>
-        <Button onClick={() => setZapAmount(50)} className='m-1' type='button' theme={zapAmount === 50 ? 'primary' : 'muted'} text='👍 50' />
-        <Button onClick={() => setZapAmount(200)} className='m-1' type='button' theme={zapAmount === 200 ? 'primary' : 'muted'} text='🩵  200' />
-        <Button onClick={() => setZapAmount(1_000)} className='m-1' type='button' theme={zapAmount === 1_000 ? 'primary' : 'muted'} text='🤩 1K' />
-        <Button onClick={() => setZapAmount(3_000)} className='m-1' type='button' theme={zapAmount === 3_000 ? 'primary' : 'muted'} text='🔥 3K' />
-        <Button onClick={() => setZapAmount(5_000)} className='m-1' type='button' theme={zapAmount === 5_000 ? 'primary' : 'muted'} text='🧙 5K' />
+        <Button onClick={() => setZapAmount(50)} className='m-1' type='button' icon={icons.coinIcon} iconSize={3} theme={zapAmount === 50 ? 'primary' : 'muted'} text='50' />
+        <Button onClick={() => setZapAmount(200)} className='m-1' type='button' icon={icons.coinStack} iconSize={4} theme={zapAmount === 200 ? 'primary' : 'muted'} text='200' />
+        <Button onClick={() => setZapAmount(1_000)} className='m-1' type='button' icon={icons.pileCoin} iconSize={5} theme={zapAmount === 1_000 ? 'primary' : 'muted'} text='1K' />
+        <Button onClick={() => setZapAmount(3_000)} className='m-1' type='button' icon={icons.moneyBag} iconSize={5} theme={zapAmount === 3_000 ? 'primary' : 'muted'} text='3K' />
+        <Button onClick={() => setZapAmount(5_000)} className='m-1' type='button' icon={icons.chestIcon} iconSize={5} theme={zapAmount === 5_000 ? 'primary' : 'muted'} text='5K' />
       </div>
 
       <div className='flex justify-center'>