@transferwise/icons 3.11.0-beta.3 → 3.12.0

package/build/components/spend-franc.tsx

@@ -26,7 +26,7 @@ export const SpendFranc: React.FunctionComponent<SpendFrancIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-spend-franc tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-spend-franc ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'spend-franc-icon'}

package/build/components/spend-hryvnia.tsx

@@ -26,7 +26,7 @@ export const SpendHryvnia: React.FunctionComponent<SpendHryvniaIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-spend-hryvnia tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-spend-hryvnia ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'spend-hryvnia-icon'}

package/build/components/spend-koruna.tsx

@@ -26,7 +26,7 @@ export const SpendKoruna: React.FunctionComponent<SpendKorunaIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-spend-koruna tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-spend-koruna ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'spend-koruna-icon'}

package/build/components/spend-krone.tsx

@@ -26,7 +26,7 @@ export const SpendKrone: React.FunctionComponent<SpendKroneIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-spend-krone tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-spend-krone ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'spend-krone-icon'}

package/build/components/spend-kuna.tsx

@@ -26,7 +26,7 @@ export const SpendKuna: React.FunctionComponent<SpendKunaIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-spend-kuna tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-spend-kuna ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'spend-kuna-icon'}

package/build/components/spend-leu-lei.tsx

@@ -26,7 +26,7 @@ export const SpendLeuLei: React.FunctionComponent<SpendLeuLeiIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-spend-leu-lei tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-spend-leu-lei ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'spend-leu-lei-icon'}

package/build/components/spend-lev.tsx

@@ -26,7 +26,7 @@ export const SpendLev: React.FunctionComponent<SpendLevIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-spend-lev tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-spend-lev ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'spend-lev-icon'}

package/build/components/spend-lira.tsx

@@ -26,7 +26,7 @@ export const SpendLira: React.FunctionComponent<SpendLiraIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-spend-lira tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-spend-lira ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'spend-lira-icon'}

package/build/components/spend-pound.tsx

@@ -26,7 +26,7 @@ export const SpendPound: React.FunctionComponent<SpendPoundIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-spend-pound tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-spend-pound ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'spend-pound-icon'}

package/build/components/spend-real.tsx

@@ -26,7 +26,7 @@ export const SpendReal: React.FunctionComponent<SpendRealIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-spend-real tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-spend-real ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'spend-real-icon'}

package/build/components/spend-ringgit.tsx

@@ -26,7 +26,7 @@ export const SpendRinggit: React.FunctionComponent<SpendRinggitIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-spend-ringgit tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-spend-ringgit ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'spend-ringgit-icon'}

package/build/components/spend-rupee.tsx

@@ -26,7 +26,7 @@ export const SpendRupee: React.FunctionComponent<SpendRupeeIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-spend-rupee tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-spend-rupee ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'spend-rupee-icon'}

package/build/components/spend-rupiah.tsx

@@ -26,7 +26,7 @@ export const SpendRupiah: React.FunctionComponent<SpendRupiahIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-spend-rupiah tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-spend-rupiah ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'spend-rupiah-icon'}

package/build/components/spend-yen.tsx

@@ -26,7 +26,7 @@ export const SpendYen: React.FunctionComponent<SpendYenIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-spend-yen tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-spend-yen ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'spend-yen-icon'}

package/build/components/spend-zloty.tsx

@@ -26,7 +26,7 @@ export const SpendZloty: React.FunctionComponent<SpendZlotyIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-spend-zloty tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-spend-zloty ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'spend-zloty-icon'}

package/build/components/split-money.tsx

@@ -26,7 +26,7 @@ export const SplitMoney: React.FunctionComponent<SplitMoneyIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-split-money tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-split-money ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'split-money-icon'}

package/build/components/star-fill.tsx

@@ -26,7 +26,7 @@ export const StarFill: React.FunctionComponent<StarFillIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-star-fill tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-star-fill ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'star-fill-icon'}

package/build/components/star.tsx

@@ -26,7 +26,7 @@ export const Star: React.FunctionComponent<StarIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-star tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-star ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'star-icon'}

package/build/components/stationery.tsx

@@ -26,7 +26,7 @@ export const Stationery: React.FunctionComponent<StationeryIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-stationery tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-stationery ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'stationery-icon'}

package/build/components/stop.tsx

@@ -26,7 +26,7 @@ export const Stop: React.FunctionComponent<StopIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-stop tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-stop ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'stop-icon'}

package/build/components/suitcase.tsx

@@ -26,7 +26,7 @@ export const Suitcase: React.FunctionComponent<SuitcaseIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-suitcase tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-suitcase ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'suitcase-icon'}

package/build/components/sunglasses.tsx

@@ -26,7 +26,7 @@ export const Sunglasses: React.FunctionComponent<SunglassesIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-sunglasses tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-sunglasses ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'sunglasses-icon'}

package/build/components/switch.tsx

@@ -26,7 +26,7 @@ export const Switch: React.FunctionComponent<SwitchIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-switch tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-switch ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'switch-icon'}

package/build/components/takeaway.tsx

@@ -26,7 +26,7 @@ export const Takeaway: React.FunctionComponent<TakeawayIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-takeaway tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-takeaway ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'takeaway-icon'}

package/build/components/target.tsx

@@ -26,7 +26,7 @@ export const Target: React.FunctionComponent<TargetIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-target tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-target ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'target-icon'}

package/build/components/tax.tsx

@@ -26,7 +26,7 @@ export const Tax: React.FunctionComponent<TaxIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-tax tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-tax ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'tax-icon'}

package/build/components/taxi.tsx

@@ -26,7 +26,7 @@ export const Taxi: React.FunctionComponent<TaxiIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-taxi tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-taxi ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'taxi-icon'}

package/build/components/team.tsx

@@ -26,7 +26,7 @@ export const Team: React.FunctionComponent<TeamIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-team tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-team ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'team-icon'}

package/build/components/theme.tsx

@@ -26,7 +26,7 @@ export const Theme: React.FunctionComponent<ThemeIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-theme tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-theme ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'theme-icon'}

package/build/components/transfer.tsx

@@ -26,7 +26,7 @@ export const Transfer: React.FunctionComponent<TransferIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-transfer tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-transfer ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'transfer-icon'}

package/build/components/transport.tsx

@@ -26,7 +26,7 @@ export const Transport: React.FunctionComponent<TransportIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-transport tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-transport ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'transport-icon'}

package/build/components/travel.tsx

@@ -26,7 +26,7 @@ export const Travel: React.FunctionComponent<TravelIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-travel tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-travel ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'travel-icon'}

package/build/components/trustly.tsx

@@ -26,7 +26,7 @@ export const Trustly: React.FunctionComponent<TrustlyIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-trustly tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-trustly ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'trustly-icon'}

package/build/components/twitter.tsx

@@ -26,7 +26,7 @@ export const Twitter: React.FunctionComponent<TwitterIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-twitter tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-twitter ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'twitter-icon'}

package/build/components/two-step.tsx

@@ -26,7 +26,7 @@ export const TwoStep: React.FunctionComponent<TwoStepIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-two-step tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-two-step ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'two-step-icon'}

package/build/components/unlock.tsx

@@ -26,7 +26,7 @@ export const Unlock: React.FunctionComponent<UnlockIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-unlock tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-unlock ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'unlock-icon'}

package/build/components/upi.tsx

@@ -0,0 +1,50 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface UpiIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+  role?: React.AriaRole;
+}
+
+export const Upi: React.FunctionComponent<UpiIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  role = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Upi filled /> is now deprecated, please use <UpiFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-upi ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={role ?? (title ? undefined : 'none')}
+      data-testid={restProps['data-testid'] || 'upi-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path d="M19.431 11.815 14.96 1.977a.446.446 0 0 0-.838.068L12.946 6.39l-2.002-4.413a.446.446 0 0 0-.839.067L4.73 21.72a.447.447 0 0 0 .748.434l4.395-4.395-1.071 3.962a.448.448 0 0 0 .748.432l9.792-9.838a.448.448 0 0 0 .09-.501Zm-8.79-8.34 3.823 8.428-8.427 8.428L10.64 3.475Zm-.537 16.854 1.038-3.839 4.174-4.174a.447.447 0 0 0 .091-.5l-1.894-4.177.02.006 1.127-4.166 3.83 8.425-8.386 8.425Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/upload.tsx

@@ -26,7 +26,7 @@ export const Upload: React.FunctionComponent<UploadIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-upload tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-upload ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'upload-icon'}

package/build/components/upward-graph.tsx

@@ -26,7 +26,7 @@ export const UpwardGraph: React.FunctionComponent<UpwardGraphIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-upward-graph tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-upward-graph ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'upward-graph-icon'}

package/build/components/venmo.tsx

@@ -26,7 +26,7 @@ export const Venmo: React.FunctionComponent<VenmoIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-venmo tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-venmo ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'venmo-icon'}

package/build/components/verified.tsx

@@ -26,7 +26,7 @@ export const Verified: React.FunctionComponent<VerifiedIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-verified tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-verified ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'verified-icon'}

package/build/components/wallet.tsx

@@ -26,7 +26,7 @@ export const Wallet: React.FunctionComponent<WalletIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-wallet tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-wallet ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'wallet-icon'}

package/build/components/warning.tsx

@@ -26,7 +26,7 @@ export const Warning: React.FunctionComponent<WarningIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-warning tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-warning ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'warning-icon'}

package/build/components/water.tsx

@@ -0,0 +1,54 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface WaterIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+  role?: React.AriaRole;
+}
+
+export const Water: React.FunctionComponent<WaterIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  role = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Water filled /> is now deprecated, please use <WaterFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-water ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={role ?? (title ? undefined : 'none')}
+      data-testid={restProps['data-testid'] || 'water-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M12.761 2.177a.862.862 0 0 0-1.523 0l-5.273 9.921c-2.441 4.594.84 10.187 6.035 10.187 5.194 0 8.476-5.593 6.034-10.187l-5.273-9.92ZM7.48 12.903 12 4.397l4.521 8.506c1.85 3.48-.651 7.668-4.52 7.668-3.87 0-6.37-4.188-4.521-7.668Zm4.95 4.24c-1.461 0-2.569-1.114-2.569-2.572H8.146c0 2.4 1.87 4.286 4.282 4.286v-1.714Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/whatsapp.tsx

@@ -26,7 +26,7 @@ export const Whatsapp: React.FunctionComponent<WhatsappIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-whatsapp tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-whatsapp ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'whatsapp-icon'}

package/build/components/withdrawal.tsx

@@ -26,7 +26,7 @@ export const Withdrawal: React.FunctionComponent<WithdrawalIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-withdrawal tw-icon-${size} ${className ? className : ''}`}
+      className={`tw-icon tw-icon-withdrawal ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
       role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'withdrawal-icon'}