@transferwise/icons 3.6.0 → 3.8.0

package/build/components/pin-code.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface PinCodeIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const PinCode: React.FunctionComponent<PinCodeIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<PinCode filled /> is now deprecated, please use <PinCodeFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-pin-code ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'pin-code-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="M5.143 2.57h3.386V6H5.143V2.57Zm5.143 0h3.386V6h-3.386V2.57Zm0 5.145h3.386v3.428h-3.386V7.715Zm3.386 5.14h-3.386v3.429h3.386v-3.428Zm-5.143-5.14H5.143v3.428h3.386V7.715Zm-3.386 5.14h3.386v3.429H5.143v-3.428ZM18.814 2.57H15.43V6h3.385V2.57Zm-3.386 5.145h3.386v3.428h-3.386V7.715Zm3.386 5.14h-3.386v3.429h3.386v-3.428Zm-8.528 5.147h3.386v3.428h-3.386v-3.428Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/pix.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface PixIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Pix: React.FunctionComponent<PixIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Pix filled /> is now deprecated, please use <PixFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-pix ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'pix-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.51 6.538c-.808 0-1.567.314-2.137.885l-3.097 3.097a.574.574 0 0 1-.81 0L8.38 7.434a3.003 3.003 0 0 0-2.137-.885H5.87L9.79 2.63a3.125 3.125 0 0 1 4.42 0l3.907 3.908h-.608ZM6.242 17.452c.807 0 1.566-.314 2.137-.885l3.085-3.085a.587.587 0 0 1 .811 0l3.097 3.096c.57.57 1.33.885 2.137.885h.608l-3.908 3.908a3.125 3.125 0 0 1-4.42 0l-3.919-3.92h.372ZM4.998 7.422 2.63 9.79a3.125 3.125 0 0 0 0 4.42l2.368 2.368a.45.45 0 0 1 .168-.034h1.077c.557 0 1.102-.225 1.495-.62l3.085-3.084c.56-.56 1.535-.56 2.095 0l3.097 3.096c.393.394.938.62 1.495.62h1.324a.45.45 0 0 1 .159.032l2.377-2.378a3.125 3.125 0 0 0 0-4.42l-2.377-2.377a.448.448 0 0 1-.16.032H17.51c-.557 0-1.102.226-1.495.62l-3.097 3.096a1.477 1.477 0 0 1-1.047.433c-.38 0-.759-.144-1.048-.433L7.738 8.076a2.128 2.128 0 0 0-1.495-.62H5.166a.451.451 0 0 1-.168-.034Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/plane.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface PlaneIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Plane: React.FunctionComponent<PlaneIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Plane filled /> is now deprecated, please use <PlaneFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-plane ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'plane-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="m7.277 4.582-.7.404 4.99 5.33-5.289 3.054-1.659-1.095-.294.17 2.445 4.233.295-.17-.115-1.977 5.265-3.04 2.544 7.72.699-.404-.42-8.945 4.517-2.618.613-.927a.19.19 0 0 0-.17-.294l-1.109.066-4.496 2.596-7.116-4.103Zm-.666-1.668c.412-.238.92-.238 1.332 0l6.45 3.719 3.698-2.136c.18-.103.38-.164.587-.176l1.214-.073a1.968 1.968 0 0 1 1.76 3.048l-.67 1.015a1.333 1.333 0 0 1-.445.42l-3.672 2.127.381 8.137c.024.498-.233.967-.665 1.217l-1.406.812a1.333 1.333 0 0 1-1.933-.738l-2.031-6.162-2.423 1.399.068 1.156c.029.503-.228.98-.665 1.232l-.917.53a1.333 1.333 0 0 1-1.821-.489l-2.89-5.003a1.333 1.333 0 0 1 .489-1.822l.916-.53c.438-.252.98-.235 1.402.043l.97.641L8.74 9.897 4.897 5.792a1.333 1.333 0 0 1 .307-2.066l1.407-.812Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/plus-circle.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface PlusCircleIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const PlusCircle: React.FunctionComponent<PlusCircleIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<PlusCircle filled /> is now deprecated, please use <PlusCircleFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-plus-circle ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'plus-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 12C1.714 6.344 6.343 1.716 12 1.716S22.286 6.343 22.286 12c0 5.657-4.629 10.285-10.286 10.285S1.714 17.658 1.714 12.001Zm1.715 0c0 4.715 3.857 8.572 8.571 8.572 4.714 0 8.572-3.857 8.572-8.571 0-4.715-3.858-8.572-8.572-8.572-4.714 0-8.571 3.857-8.571 8.572Zm7.714-6.002h1.714v5.143H18v1.714h-5.143v5.143h-1.714v-5.143H6v-1.714h5.143V5.998Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/plus.tsx

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

package/build/components/profile.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface ProfileIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Profile: React.FunctionComponent<ProfileIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Profile filled /> is now deprecated, please use <ProfileFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-profile ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'profile-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="M15.257 14.014A5.922 5.922 0 0 0 18 9c0-3.3-2.7-6-6-6S6 5.7 6 9c0 2.1 1.071 3.943 2.743 5.014-2.614 1.243-4.457 3.9-4.457 6.986H6c0-3.3 2.7-6 6-6s6 2.7 6 6h1.714c0-3.086-1.842-5.743-4.457-6.986ZM7.714 9A4.298 4.298 0 0 1 12 4.714 4.298 4.298 0 0 1 16.286 9 4.298 4.298 0 0 1 12 13.286 4.298 4.298 0 0 1 7.714 9Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/qr-code.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface QrCodeIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const QrCode: React.FunctionComponent<QrCodeIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<QrCode filled /> is now deprecated, please use <QrCodeFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-qr-code ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'qr-code-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="M15 3.429V9h5.571V3.43H15Zm-.896-1.715a.818.818 0 0 0-.818.819v7.363c0 .452.366.818.818.818h7.364a.818.818 0 0 0 .818-.818V2.533a.818.818 0 0 0-.819-.819h-7.363ZM3.429 15v5.571H9V15H3.43Zm-.896-1.714a.818.818 0 0 0-.819.818v7.364c0 .451.367.818.819.818h7.363a.818.818 0 0 0 .818-.819v-7.363a.818.818 0 0 0-.818-.818H2.533ZM3.429 9V3.43H9V9H3.43ZM1.714 2.533c0-.452.367-.819.819-.819h7.363c.452 0 .818.367.818.819v7.363a.818.818 0 0 1-.818.818H2.533a.818.818 0 0 1-.819-.818V2.533Zm15.43 14.61h-3.858v-3.857h3.857v3.857Zm1.285 0h3.857v-3.857h-3.858v3.857Zm-1.286 5.143h-3.857v-3.858h3.857v3.858Zm1.285 0h3.858v-3.858h-3.858v3.858Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/question-mark-circle.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface QuestionMarkCircleIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const QuestionMarkCircle: React.FunctionComponent<QuestionMarkCircleIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<QuestionMarkCircle filled /> is now deprecated, please use <QuestionMarkCircleFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-question-mark-circle ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'question-mark-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="M12 1.717c-5.657 0-10.286 4.628-10.286 10.285 0 5.658 4.63 10.286 10.286 10.286 5.657 0 10.286-4.628 10.286-10.286 0-5.657-4.629-10.285-10.286-10.285Zm0 18.857c-4.714 0-8.571-3.857-8.571-8.572 0-4.714 3.857-8.57 8.571-8.57 4.715 0 8.572 3.856 8.572 8.57 0 4.715-3.857 8.572-8.572 8.572Zm0-2.569a1.286 1.286 0 1 0 0-2.571 1.286 1.286 0 0 0 0 2.571ZM8.7 10.29c0-1.972 1.372-3.429 3.3-3.429 1.929 0 3.3 1.372 3.3 3.3 0 1.072-.771 1.886-1.457 2.572-.471.471-.986.986-.986 1.371h-1.714c0-1.071.772-1.885 1.457-2.571.472-.472.986-.986.986-1.372 0-.985-.6-1.585-1.586-1.585-.943 0-1.585.685-1.585 1.714H8.7Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/question-mark.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface QuestionMarkIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const QuestionMark: React.FunctionComponent<QuestionMarkIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<QuestionMark filled /> is now deprecated, please use <QuestionMarkFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-question-mark ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'question-mark-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 8.569c0-3.043 2.1-5.143 5.143-5.143 3.043 0 5.143 2.1 5.143 5.143 0 1.628-1.243 2.871-2.4 4.028-.986.986-1.886 1.886-1.886 2.829v.857h-1.714v-.857c0-1.629 1.2-2.872 2.4-4.029.986-.986 1.886-1.885 1.886-2.828 0-2.1-1.33-3.429-3.43-3.429S8.572 6.47 8.572 8.57H6.857Zm6.429 10.715a1.286 1.286 0 1 1-2.572 0 1.286 1.286 0 0 1 2.572 0Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/rain.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface RainIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Rain: React.FunctionComponent<RainIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Rain filled /> is now deprecated, please use <RainFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-rain ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'rain-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.067 3.556a3.379 3.379 0 0 0-3.352 2.958 1.4 1.4 0 0 1-.705 1.048 2.845 2.845 0 0 0 1.297 5.327H18.198a2.311 2.311 0 0 0-.065-4.622.89.89 0 0 1-.89-.912l.002-.066a2.578 2.578 0 0 0-3.838-2.25 1.431 1.431 0 0 1-1.78-.309 3.368 3.368 0 0 0-2.56-1.174Zm-5.09 2.552a5.157 5.157 0 0 1 8.807-2.747 4.357 4.357 0 0 1 6.18 3.213 4.09 4.09 0 0 1-.742 8.093H6.224a.892.892 0 0 1-.136-.01 4.622 4.622 0 0 1-2.11-8.55Zm14.156.381h.003ZM4.553 18.019l1.334-2.445 1.56.851-1.333 2.445-1.56-.851ZM10.33 18.019l1.334-2.445 1.56.851-1.333 2.445-1.56-.851ZM16.108 18.019l1.334-2.445 1.56.851-1.333 2.445-1.56-.851ZM6.553 21.13l1.334-2.444 1.56.85-1.333 2.445-1.56-.851ZM12.33 21.13l1.334-2.444 1.56.85-1.333 2.445-1.56-.851Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/rainbow.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface RainbowIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Rainbow: React.FunctionComponent<RainbowIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Rainbow filled /> is now deprecated, please use <RainbowFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-rainbow ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'rainbow-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 6.222A10.222 10.222 0 0 0 1.778 16.444h1.778a8.444 8.444 0 1 1 16.889 0h1.777A10.222 10.222 0 0 0 12 6.222Zm-5.029 5.194a7.111 7.111 0 0 1 12.14 5.028h-1.778a5.333 5.333 0 1 0-10.667 0H4.89c0-1.886.749-3.694 2.082-5.028Zm2.2 2.2A4 4 0 0 1 16 16.444h-1.778a2.222 2.222 0 1 0-4.444 0H8a4 4 0 0 1 1.172-2.828Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/receipt.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface ReceiptIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Receipt: React.FunctionComponent<ReceiptIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Receipt filled /> is now deprecated, please use <ReceiptFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-receipt ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'receipt-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="M5.143 20.777c0 .923.944 1.546 1.792 1.182L9 21.074l2.493 1.069c.324.138.69.138 1.014 0L15 21.074l2.065.885a1.286 1.286 0 0 0 1.792-1.182V3c0-.71-.575-1.286-1.286-1.286H6.43c-.71 0-1.286.576-1.286 1.286v17.778Zm3.35-1.351-1.636.701v-16.7h10.286v16.7l-1.636-.701a1.286 1.286 0 0 0-1.014 0L12 20.495l-2.494-1.069a1.286 1.286 0 0 0-1.012 0Zm.078-9.14v1.713h6.858v-1.714H8.57Zm0-2.144V6.428h6.858v1.714H8.57Zm0 6v1.715h6.858v-1.715H8.57Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/receive.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface ReceiveIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Receive: React.FunctionComponent<ReceiveIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Receive filled /> is now deprecated, please use <ReceiveFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-receive ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'receive-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="m20.143 12.258-7.114 7.114V1.715h-1.715v17.657L4.2 12.258l-1.2 1.2 8.571 8.571a.846.846 0 0 0 .6.257.846.846 0 0 0 .6-.257l8.572-8.571-1.2-1.2Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};