@transferwise/icons 3.6.0 → 3.7.0

package/build/components/e-commerce.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface ECommerceIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const ECommerce: React.FunctionComponent<ECommerceIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<ECommerce filled /> is now deprecated, please use <ECommerceFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-e-commerce ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'e-commerce-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.713a4.286 4.286 0 0 0-4.286 4.286v.857H4.29a.861.861 0 0 0-.861.861v11.996A2.571 2.571 0 0 0 6 22.284h12a2.571 2.571 0 0 0 2.571-2.571V7.717a.861.861 0 0 0-.861-.861h-3.424v-.857A4.286 4.286 0 0 0 12 1.713Zm2.571 5.143v-.857a2.571 2.571 0 0 0-5.142 0v.857h5.142ZM7.714 8.57H5.143v11.143c0 .473.384.857.857.857h12a.857.857 0 0 0 .857-.857V8.57H7.714Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/eating-out.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface EatingOutIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const EatingOut: React.FunctionComponent<EatingOutIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<EatingOut filled /> is now deprecated, please use <EatingOutFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-eating-out ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'eating-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="M15.698 3.859 10.127 9.43h2.932l6.784-6.784 1.212 1.213-5.571 5.571h2.859c.47 0 .857.38.857.857v1.32a7.062 7.062 0 0 1-4.312 6.505l.635 2.22a.861.861 0 0 1-.829 1.098H7.42a.861.861 0 0 1-.828-1.098l.634-2.22a7.062 7.062 0 0 1-4.312-6.505v-1.32c0-.471.382-.857.857-.857h3.931l6.784-6.784 1.212 1.213Zm1.788 7.285H4.629v.463a5.347 5.347 0 0 0 3.878 5.142c.453.13.72.602.589 1.06l-.545 1.907h5.013l-.545-1.908a.857.857 0 0 1 .588-1.06 5.347 5.347 0 0 0 3.879-5.14v-.464Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/edit.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface EditIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Edit: React.FunctionComponent<EditIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Edit filled /> is now deprecated, please use <EditFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-edit ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'edit-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="M20.033 2.747a2.571 2.571 0 0 0-3.637 0L3.287 15.856l-1.123 5.168c-.13.6.391 1.14.996 1.03l4.971-.903L21.465 7.817a2.571 2.571 0 0 0 0-3.637l-1.432-1.433ZM17.608 3.96a.857.857 0 0 1 1.212 0l1.433 1.433a.857.857 0 0 1 0 1.212l-1.289 1.29-2.645-2.645 1.29-1.29Zm-2.501 2.502L4.856 16.712 4.11 20.14l3.188-.58L17.752 9.106 15.107 6.46Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/email-and-mobile.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface EmailAndMobileIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const EmailAndMobile: React.FunctionComponent<EmailAndMobileIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<EmailAndMobile filled /> is now deprecated, please use <EmailAndMobileFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-email-and-mobile ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'email-and-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="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-2.966l-.039.001H2.576a.861.861 0 0 1-.862-.861v-9.42c0-.476.386-.862.862-.862h12.848c.476 0 .862.386.862.862v8.566h2.143a.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.857v6.858H9V4.284ZM3.429 20.571v-6.092l4.651 3.544a1.518 1.518 0 0 0 1.84 0l4.651-3.544v6.092H3.43ZM9 16.434l-4.696-3.577h9.392L9 16.434Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/email-and-phone.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface EmailAndPhoneIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const EmailAndPhone: React.FunctionComponent<EmailAndPhoneIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<EmailAndPhone filled /> is now deprecated, please use <EmailAndPhoneFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-email-and-phone ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'email-and-phone-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-2.966l-.039.001H2.576a.861.861 0 0 1-.862-.861v-9.42c0-.476.386-.862.862-.862h12.848c.476 0 .862.386.862.862v8.566h2.143a.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.857v6.858H9V4.284ZM3.429 20.571v-6.092l4.651 3.544a1.518 1.518 0 0 0 1.84 0l4.651-3.544v6.092H3.43ZM9 16.434l-4.696-3.577h9.392L9 16.434Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/email.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface EmailIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Email: React.FunctionComponent<EmailIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Email filled /> is now deprecated, please use <EmailFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-email ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'email-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="M21.429 4.285H2.572a.86.86 0 0 0-.858.857v13.715a.86.86 0 0 0 .857.857H21.43a.86.86 0 0 0 .857-.857V5.142a.86.86 0 0 0-.857-.857ZM18.772 6 12 10.928 5.23 5.999h13.543ZM3.428 18V6.814l8.057 5.871a.824.824 0 0 0 .514.172.824.824 0 0 0 .514-.172l8.058-5.871v11.185H3.428Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/emoji.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface EmojiIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Emoji: React.FunctionComponent<EmojiIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Emoji filled /> is now deprecated, please use <EmojiFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-emoji ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'emoji-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.299 6.3 1.713 12 1.713c5.7 0 10.286 4.586 10.286 10.286 0 5.7-4.586 10.285-10.286 10.285C6.3 22.284 1.714 17.7 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 12Zm4.886 1.757c.771 1.328 2.142 2.1 3.685 2.1 1.5 0 2.915-.815 3.686-2.143l1.5.857a6.012 6.012 0 0 1-5.186 3 6.007 6.007 0 0 1-5.143-2.914l1.458-.9ZM9 11.144a1.286 1.286 0 1 0 0-2.572 1.286 1.286 0 0 0 0 2.572Zm7.286-1.286a1.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/entertainment.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface EntertainmentIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Entertainment: React.FunctionComponent<EntertainmentIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Entertainment filled /> is now deprecated, please use <EntertainmentFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-entertainment ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'entertainment-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="M3 5.143c-.71 0-1.286.575-1.286 1.285V8.57c0 .474.408.842.82 1.076.638.363 1.109 1.171 1.109 2.353 0 1.181-.471 1.99-1.11 2.353-.411.234-.819.602-.819 1.075v2.144c0 .71.576 1.286 1.286 1.286h18c.709 0 1.286-.574 1.286-1.285v-2.144c0-.474-.408-.842-.82-1.076-.638-.364-1.109-1.172-1.109-2.353 0-1.182.471-1.99 1.11-2.353.411-.234.819-.602.819-1.076V6.428c0-.71-.576-1.285-1.286-1.285H3Zm15.643 6.856c0 1.583.689 3.1 1.928 3.831v1.313H3.43V15.83c1.24-.73 1.928-2.248 1.928-3.831 0-1.583-.689-3.1-1.928-3.831V6.857H20.57v1.31c-1.24.732-1.928 2.249-1.928 3.832Zm-5.786-2.571h-1.714v5.142h1.714V9.428Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/exchange-rate.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface ExchangeRateIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const ExchangeRate: React.FunctionComponent<ExchangeRateIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<ExchangeRate filled /> is now deprecated, please use <ExchangeRateFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-exchange-rate ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'exchange-rate-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="M21.392 6.964A.964.964 0 0 0 20.427 6h-5.035v1.714h3.074l-6.503 6.503-2.82-2.82a.861.861 0 0 0-1.217 0L2.57 16.753l1.213 1.212 4.75-4.751 2.82 2.82a.861.861 0 0 0 1.218 0l7.105-7.106V12h1.715V6.964Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/expand.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface ExpandIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Expand: React.FunctionComponent<ExpandIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Expand filled /> is now deprecated, please use <ExpandFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-expand ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'expand-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.271 9.213 11.828 3.77 6.343 9.213l-1.2-1.2 6.086-6.043a.829.829 0 0 1 1.2 0l6.042 6.043-1.2 1.2Zm-10.885 5.53 5.443 5.485 5.442-5.443 1.2 1.2-6.042 6.043a.847.847 0 0 1-.6.257.749.749 0 0 1-.6-.3l-6.043-6.043 1.2-1.2Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/expenses.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface ExpensesIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Expenses: React.FunctionComponent<ExpensesIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Expenses filled /> is now deprecated, please use <ExpensesFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-expenses ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'expenses-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="M12 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 12C22.286 6.34 17.657 1.713 12 1.713Zm.857 1.757c1.715.171 3.3.857 4.543 1.886L12.857 9.94V3.47Zm-1.714 0v7.672H3.47c.386-4.03 3.643-7.286 7.672-7.672ZM12 20.57a8.564 8.564 0 0 1-8.529-7.714h8.53a.846.846 0 0 0 .6-.257l6.042-6.043a8.683 8.683 0 0 1 1.928 5.443c0 4.714-3.857 8.571-8.57 8.571Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/eye-shut.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface EyeShutIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const EyeShut: React.FunctionComponent<EyeShutIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<EyeShut filled /> is now deprecated, please use <EyeShutFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-eye-shut ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'eye-shut-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.114 9.729 20.571 9a9.49 9.49 0 0 1-8.657 5.615A9.49 9.49 0 0 1 3.257 9l-1.543.729a11.973 11.973 0 0 0 2.358 3.386l-1.63 1.971 1.33 1.114L5.4 14.23c.6.429 1.243.814 1.886 1.114l-.857 2.4 1.628.6.857-2.4a8.997 8.997 0 0 0 2.143.386V18.9h1.714V16.33a8.998 8.998 0 0 0 2.143-.386l.857 2.4 1.63-.6-.858-2.4c.686-.3 1.286-.685 1.886-1.114l1.628 1.971 1.329-1.114-1.629-1.971c.986-.986 1.8-2.1 2.357-3.386Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/eye.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface EyeIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Eye: React.FunctionComponent<EyeIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Eye filled /> is now deprecated, please use <EyeFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-eye ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'eye-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.571 13.287.713.476.004-.006a3.057 3.057 0 0 1 .128-.177c.095-.126.24-.312.434-.537a13.06 13.06 0 0 1 1.721-1.658C7.082 10.176 9.256 9.001 12 9.001s4.918 1.175 6.429 2.384a13.061 13.061 0 0 1 1.72 1.658 10.362 10.362 0 0 1 .563.714l.004.006.713-.476c.713-.475.713-.476.712-.476l-.001-.002-.004-.006-.01-.015a5.162 5.162 0 0 0-.17-.236c-.117-.155-.286-.37-.507-.628a14.776 14.776 0 0 0-1.95-1.878C17.798 8.684 15.257 7.287 12 7.287c-3.256 0-5.797 1.397-7.5 2.76a14.78 14.78 0 0 0-1.949 1.877 12.087 12.087 0 0 0-.677.864l-.01.015-.004.005v.002l-.001.001.712.476ZM12 15.858a2.571 2.571 0 1 0 0-5.142 2.571 2.571 0 0 0 0 5.143Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};