Refactor Icon component

Added 'element' prop to Icon component, updated imports, and cleaned up spaces.

src/components/ui/button/button.tsx

@@ -17,6 +17,8 @@ interface IButton {
   className?: string;
   /** Prevent the button from being clicked. */
   disabled?: boolean;
+  /** Specifies the media element type as 'svg' or 'img'. */
+  element?: 'svg' | 'img';
   /** URL to an SVG icon to render inside the button. */
   icon?: string;
   /** Action when the button is clicked. */
@@ -39,6 +41,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
     block = false,
     children,
     disabled = false,
+    element = 'svg',
     icon,
     onClick,
     size = 'md',
@@ -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-4 w-4' element={element} />;
   };
 
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback((event) => {

src/components/ui/icon/icon.tsx

@@ -17,15 +17,14 @@ interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
   src: string;
   /** Width and height of the icon in pixels. */
   size?: number;
+  /** Specifies the media element type as 'svg' or 'img'. */
+  element?: 'svg' | 'img';
   /** Override the data-testid */
   'data-testid'?: string;
 }
 
 /** Renders an SVG or image icon with optional counter. */
-const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, ...filteredProps }): JSX.Element => {
+const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, element, ...filteredProps }): JSX.Element => {
-
-  const isSVG = src.endsWith('.svg');
-
   return (
     <div
       className='relative flex shrink-0 flex-col'
@@ -36,7 +35,7 @@ const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, ...filteredPro
           <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} />) }
+      {element === 'svg' ? (<SvgIcon src={src} size={size} alt={alt} {...filteredProps} />) : (<img src={src} width={size} height={size} alt={alt} {...filteredProps} />) }
 
     </div>
   );

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

@@ -3,19 +3,17 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { zap } from 'soapbox/actions/interactions';
 import { openModal, closeModal } from 'soapbox/actions/modals';
+import chestIcon from 'soapbox/assets/icons/blue-chest.png';
+import coinStack from 'soapbox/assets/icons/coin-stack.png';
+import coinIcon from 'soapbox/assets/icons/coin.png';
+import moneyBag from 'soapbox/assets/icons/money-bag.png';
+import pileCoin from 'soapbox/assets/icons/pile-coin.png';
 import Account from 'soapbox/components/account';
 import { Stack, Button, Input } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
 import type {  Account as AccountEntity, Status as StatusEntity   } from 'soapbox/types/entities';
 
-const chestIcon = require('soapbox/assets/icons/blue-chest.png');
-const coinStack = require('soapbox/assets/icons/coin-stack.png');
-const coinIcon = require('soapbox/assets/icons/coin.png');
-const moneyBag = require('soapbox/assets/icons/money-bag.png');
-const pileCoin = require('soapbox/assets/icons/pile-coin.png');
-
-
 
 interface IZapPayRequestForm {
   status?: StatusEntity;
@@ -74,11 +72,11 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => {
       </div>
 
       <div className='flex justify-center '>
-        <Button onClick={() => setZapAmount(50)} className='m-1' type='button' icon={coinIcon} theme={zapAmount === 50 ? 'primary' : 'muted'} text='50' />
+        <Button onClick={() => setZapAmount(50)} className='m-1' type='button' element='img' icon={coinIcon} theme={zapAmount === 50 ? 'primary' : 'muted'} text='50' />
-        <Button onClick={() => setZapAmount(200)} className='m-1' type='button' icon={coinStack} theme={zapAmount === 200 ? 'primary' : 'muted'} text='200' />
+        <Button onClick={() => setZapAmount(200)} className='m-1' type='button' element='img' icon={coinStack} theme={zapAmount === 200 ? 'primary' : 'muted'} text='200' />
-        <Button onClick={() => setZapAmount(1_000)} className='m-1' type='button' icon={pileCoin} theme={zapAmount === 1_000 ? 'primary' : 'muted'} text='1K' />
+        <Button onClick={() => setZapAmount(1_000)} className='m-1' type='button' element='img' icon={pileCoin} theme={zapAmount === 1_000 ? 'primary' : 'muted'} text='1K' />
-        <Button onClick={() => setZapAmount(3_000)} className='m-1' type='button' icon={moneyBag} theme={zapAmount === 3_000 ? 'primary' : 'muted'} text='3K' />
+        <Button onClick={() => setZapAmount(3_000)} className='m-1' type='button' element='img' icon={moneyBag} theme={zapAmount === 3_000 ? 'primary' : 'muted'} text='3K' />
-        <Button onClick={() => setZapAmount(5_000)} className='m-1' type='button' icon={chestIcon} theme={zapAmount === 5_000 ? 'primary' : 'muted'} text='5K' />
+        <Button onClick={() => setZapAmount(5_000)} className='m-1' type='button' element='img' icon={chestIcon} theme={zapAmount === 5_000 ? 'primary' : 'muted'} text='5K' />
       </div>
 
       <div className='flex justify-center'>