@transferwise/icons 3.6.0 → 3.7.0

package/build/components/log-in.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface LogInIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const LogIn: React.FunctionComponent<LogInIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<LogIn filled /> is now deprecated, please use <LogInFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-log-in ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'log-in-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="M6.857 1.713H21.43a.86.86 0 0 1 .857.857v18.857a.86.86 0 0 1-.857.857H6.857V20.57h13.715V3.427H6.857V1.713Zm4.8 16.928-1.2-1.2 4.629-4.586H1.714v-1.714h13.372L10.5 6.513l1.2-1.2 6 6.085a.829.829 0 0 1 0 1.2l-6.043 6.043Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/log-out.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface LogOutIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const LogOut: React.FunctionComponent<LogOutIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<LogOut filled /> is now deprecated, please use <LogOutFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-log-out ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'log-out-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="M17.143 3.431H3.429v17.143h13.714v1.714H2.571a.86.86 0 0 1-.857-.857V2.574a.86.86 0 0 1 .857-.857h14.572V3.43Zm-1.157 1.885 6.043 6.086c.343.343.343.857-.043 1.2l-6.043 6.043-1.2-1.2 4.629-4.586H6v-1.714h13.372l-4.586-4.629 1.2-1.2Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/marketing.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface MarketingIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Marketing: React.FunctionComponent<MarketingIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Marketing filled /> is now deprecated, please use <MarketingFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-marketing ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'marketing-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="M22.286 5.999V2.57a.86.86 0 0 0-.857-.857H18a.847.847 0 0 0-.771.514l-.3.729C15.386 2.14 13.757 1.713 12 1.713c-5.657 0-10.286 4.628-10.286 10.286 0 5.657 4.629 10.285 10.286 10.285S22.286 17.656 22.286 12c0-1.758-.429-3.386-1.243-4.886l.729-.3c.3-.172.514-.472.514-.814ZM20.57 3.427v2.014l-3.514 1.5 1.5-3.514h2.015Zm0 8.572c0 4.714-3.857 8.571-8.57 8.571-4.715 0-8.572-3.857-8.572-8.571 0-4.715 3.857-8.572 8.571-8.572 1.5 0 2.957.386 4.243 1.114l-1.371 3.172c-.815-.557-1.8-.857-2.872-.857-2.829 0-5.143 2.314-5.143 5.143 0 2.828 2.314 5.143 5.143 5.143 2.829 0 5.143-2.315 5.143-5.143 0-1.072-.3-2.058-.857-2.872l3.171-1.371a8.592 8.592 0 0 1 1.114 4.243Zm-5.142 0A3.439 3.439 0 0 1 12 15.427 3.439 3.439 0 0 1 8.572 12 3.439 3.439 0 0 1 12 8.57c.643 0 1.243.171 1.757.471L11.4 11.4l1.2 1.2 2.357-2.357c.3.514.472 1.114.472 1.757Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/mass-payout.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface MassPayoutIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const MassPayout: React.FunctionComponent<MassPayoutIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<MassPayout filled /> is now deprecated, please use <MassPayoutFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-mass-payout ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'mass-payout-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="m10.035 5.749 1.108-1.108v3.502h1.714V4.64l1.108 1.108 1.213-1.212-2.569-2.569a.861.861 0 0 0-1.218 0L8.823 4.537l1.212 1.212Zm-5.394.68h1.788V4.714H2.576a.861.861 0 0 0-.862.862v3.853H3.43V7.64l2.394 2.394 1.212-1.213L4.64 6.43Zm2.645 5.319V10.29c0-.476.385-.861.861-.861h7.706c.476 0 .861.385.861.861v1.458l2.134 1.219c.29.165.434.457.434.747h.004v7.71a.861.861 0 0 1-.862.862H5.576a.861.861 0 0 1-.862-.862v-7.71h.004c0-.29.144-.582.434-.747l2.134-1.22ZM9 14.57l3 1.6 3-1.6v-3.428H9v3.428Zm-2.571 6v-5.428l5.166 2.755a.86.86 0 0 0 .81 0l5.167-2.755v5.428H6.428ZM16.965 8.822 19.36 6.43h-1.788V4.714h3.853c.476 0 .862.386.862.862v3.853H20.57V7.64l-2.393 2.394-1.213-1.213Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/menu.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface MenuIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Menu: React.FunctionComponent<MenuIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Menu filled /> is now deprecated, please use <MenuFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-menu ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'menu-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="M19.714 6.004H4.286v1.714h15.428V6.004Zm0 5.144H4.286v1.715h15.428v-1.715ZM4.286 16.29h15.428v1.715H4.286v-1.715Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/messenger.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface MessengerIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Messenger: React.FunctionComponent<MessengerIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Messenger filled /> is now deprecated, please use <MessengerFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-messenger ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'messenger-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="M11.871 1.713c-5.614 0-10.157 4.286-10.157 9.6 0 2.957 1.415 5.614 3.686 7.371v3.6l3.471-1.8c.943.3 1.972.429 3 .429 5.615 0 10.158-4.286 10.158-9.6s-4.543-9.6-10.158-9.6Zm1.072 12.943-2.657-2.829-5.143 2.743 5.528-5.871 2.658 2.657 5.142-2.743-5.528 6.043Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/minus-circle-fill.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface MinusCircleFillIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const MinusCircleFill: React.FunctionComponent<MinusCircleFillIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<MinusCircleFill filled /> is now deprecated, please use <MinusCircleFillFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-minus-circle-fill ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'minus-circle-fill-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 22.286c5.68 0 10.286-4.605 10.286-10.286C22.286 6.32 17.68 1.714 12 1.714 6.32 1.714 1.714 6.32 1.714 12c0 5.68 4.605 10.286 10.286 10.286Zm6-9.429v-1.714H6v1.714h12Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/minus-circle.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface MinusCircleIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const MinusCircle: React.FunctionComponent<MinusCircleIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<MinusCircle filled /> is now deprecated, please use <MinusCircleFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-minus-circle ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'minus-circle-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="M1.714 11.999C1.714 6.34 6.343 1.713 12 1.713S22.286 6.34 22.286 11.999c0 5.657-4.629 10.285-10.286 10.285S1.714 17.656 1.714 12Zm1.715 0c0 4.714 3.857 8.571 8.571 8.571 4.714 0 8.572-3.857 8.572-8.571 0-4.715-3.858-8.572-8.572-8.572C7.286 3.427 3.43 7.284 3.43 12ZM6 11.14h12v1.714H6V11.14Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/minus.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface MinusIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Minus: React.FunctionComponent<MinusIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Minus filled /> is now deprecated, please use <MinusFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-minus ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'minus-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.714 11.143H4.286v1.714h15.428v-1.714Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/mobile-lock.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface MobileLockIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const MobileLock: React.FunctionComponent<MobileLockIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<MobileLock filled /> is now deprecated, please use <MobileLockFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-mobile-lock ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'mobile-lock-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="M9 4.284a2.571 2.571 0 0 1 2.571-2.571h6.858A2.571 2.571 0 0 1 21 4.284v15.429a2.571 2.571 0 0 1-2.571 2.571h-6.764a2.649 2.649 0 0 1-.094.002h-6A2.571 2.571 0 0 1 3 19.715v-6.853c0-.476.386-.862.861-.862h1.282v-1.285A3.429 3.429 0 0 1 9 7.313V4.284Zm1.714 3.754A3.429 3.429 0 0 1 12 10.714V12h1.281c.476 0 .862.386.862.862v6.853c0 .3-.052.587-.146.855h4.432a.857.857 0 0 0 .857-.857V4.284a.857.857 0 0 0-.857-.857h-1.83a.857.857 0 0 1-.742 1.286h-1.714a.857.857 0 0 1-.743-1.286h-1.829a.857.857 0 0 0-.857.857v3.754Zm.911 12.532a.857.857 0 0 0 .804-.855v-6H4.714v6c0 .473.384.857.857.857h5.143v-.002h.911ZM7.36 9.502a1.714 1.714 0 0 1 2.927 1.213V12H6.857v-1.285c0-.455.18-.891.502-1.213Zm.355 6.355H9.43v2.572H7.714v-2.572Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/mobile.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface MobileIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Mobile: React.FunctionComponent<MobileIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Mobile filled /> is now deprecated, please use <MobileFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-mobile ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'mobile-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="M8.571 1.713A2.571 2.571 0 0 0 6 4.284v15.429a2.571 2.571 0 0 0 2.571 2.571h6.858A2.571 2.571 0 0 0 18 19.713V4.284a2.571 2.571 0 0 0-2.571-2.571H8.57Zm-.857 2.571c0-.473.384-.857.857-.857h1.83a.857.857 0 0 0 .742 1.286h1.714a.857.857 0 0 0 .743-1.286h1.829c.473 0 .857.384.857.857v15.429a.857.857 0 0 1-.857.857H8.57a.857.857 0 0 1-.857-.857V4.284Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/money-bag.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface MoneyBagIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const MoneyBag: React.FunctionComponent<MoneyBagIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<MoneyBag filled /> is now deprecated, please use <MoneyBagFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-money-bag ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'money-bag-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="M10.943 5.778 9.585 3.556h4.386l-1.358 2.222h-1.67Zm4.958-1.972L14.634 5.88a.889.889 0 0 1 .32 1.292c.938.603 1.775 1.481 2.477 2.6 1.415 2.254 2.325 5.531 2.526 9.742.073 1.515-1.161 2.71-2.623 2.71H6.221c-1.457 0-2.707-1.195-2.604-2.726.238-3.57 1.163-6.82 2.544-9.207.704-1.216 1.563-2.263 2.549-2.99a.889.889 0 0 1 .212-1.421L7.654 3.806a1.333 1.333 0 0 1 1.137-2.028h5.971c1.041 0 1.68 1.14 1.138 2.028ZM5.39 19.615c.224-3.36 1.092-6.331 2.309-8.434C8.939 9.04 10.407 8 11.778 8c1.49 0 2.96.823 4.147 2.715 1.198 1.908 2.064 4.854 2.257 8.882.021.446-.345.847-.848.847H6.221c-.506 0-.86-.401-.83-.83Zm5.72-9.837h1.778v.889h1.778v1.777h-1.778v1.334h.222a2.444 2.444 0 0 1 0 4.889h-.222v.889h-1.778v-.89H9.333V16.89h1.778v-1.333h-.222a2.444 2.444 0 1 1 0-4.89h.222v-.888Zm-.222 2.666h.222v1.334h-.222a.667.667 0 0 1 0-1.334Zm2 4.445v-1.333h.222a.667.667 0 0 1 0 1.333h-.222Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/money.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface MoneyIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Money: React.FunctionComponent<MoneyIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Money filled /> is now deprecated, please use <MoneyFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-money ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'money-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="M2.576 5.57a.861.861 0 0 0-.862.862v11.134c0 .476.386.861.862.861h18.848a.861.861 0 0 0 .862-.861V6.432a.861.861 0 0 0-.862-.862H2.576Zm.853 11.143V7.285v1.713a1.714 1.714 0 0 0 1.714-1.713h13.714a1.713 1.713 0 0 0 1.714 1.713v6a1.715 1.715 0 0 0-1.714 1.714h1.714v.001H3.43Zm.656-1.585a1.715 1.715 0 0 0-.656-.13v1.714h1.714a1.714 1.714 0 0 0-1.058-1.583Zm6.2-3.13a1.714 1.714 0 1 1 3.43 0 1.714 1.714 0 0 1-3.43 0ZM12 8.57a3.429 3.429 0 1 0 0 6.857 3.429 3.429 0 0 0 0-6.857Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};