@transferwise/icons 3.6.0 → 3.8.0

package/build/components/id.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface IdIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Id: React.FunctionComponent<IdIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Id filled /> is now deprecated, please use <IdFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-id ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'id-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 4.713a.861.861 0 0 0-.862.861v12.849c0 .475.386.861.862.861h18.848a.861.861 0 0 0 .862-.861V5.574a.861.861 0 0 0-.862-.861H2.576Zm.853 12.857V6.427H20.57V17.57H3.43Zm15.428-4.714h-5.571v1.714h5.571v-1.714Zm-5.571-3.429h3.428v1.715h-3.428V9.427Zm-6.429 4.286v-3.429h3v3.429h-3ZM5.143 8.999c0-.237.192-.429.428-.429h5.572c.236 0 .428.192.428.429v6a.429.429 0 0 1-.428.428H5.57A.429.429 0 0 1 5.143 15v-6Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/ideal.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface IdealIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Ideal: React.FunctionComponent<IdealIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Ideal filled /> is now deprecated, please use <IdealFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-ideal ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'ideal-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.505 20.88H3.597c-.8 0-1.454-.655-1.454-1.454V4.881c0-.8.654-1.454 1.454-1.454h8.944c8.472 0 9.744 5.454 9.744 8.69 0 5.671-3.49 8.762-9.78 8.762ZM3.597 3.9a.939.939 0 0 0-.945.946v14.58c0 .545.436.945.945.945h8.944c5.963.036 9.235-2.909 9.235-8.254 0-7.162-5.817-8.217-9.271-8.217H3.597Zm11.998 7.272-.4 1.127h.8l-.4-1.127Zm-5.49.073c-.072-.073-.145-.146-.254-.218a1.306 1.306 0 0 0-.4-.073h-.473v1.927h.582c.109 0 .182 0 .29-.036.074-.037.183-.073.255-.146a.79.79 0 0 0 .182-.29c.036-.11.073-.255.073-.437 0-.145 0-.29-.037-.4-.109-.109-.145-.218-.218-.327Zm3.054-5.927H8.58a.939.939 0 0 0-.946.946v12.725h5.526c5.018 0 7.2-2.836 7.2-6.835 0-3.854-2.182-6.836-7.2-6.836Zm-2.29 7.2c-.073.181-.146.363-.255.472a.993.993 0 0 1-.436.327 1.568 1.568 0 0 1-.618.11H8.251v-3.055H9.56c.182 0 .364.037.545.073.182.073.328.145.437.29.109.146.218.292.29.474.073.181.11.4.11.654s0 .473-.073.654Zm2.836.945h-2.29v-3.054h2.254v.545h-1.6v.654h1.49v.546h-1.49v.727h1.636v.582Zm2.69 0-.218-.691H15.05l-.254.69h-.691l1.163-3.053h.691l1.127 3.054h-.69Zm1.128 0v-3.054h.654v2.472h1.49v.545h-2.145v.037ZM5.124 10.554a1.42 1.42 0 0 1 1.418 1.418c0 .8-.618 1.418-1.418 1.418-.8 0-1.418-.618-1.418-1.418 0-.8.655-1.418 1.418-1.418Zm1.055 8.435a2.11 2.11 0 0 1-2.11-2.109v-1.672a1.055 1.055 0 0 1 2.11 0v3.781Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/image.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface ImageIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Image: React.FunctionComponent<ImageIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Image filled /> is now deprecated, please use <ImageFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-image ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'image-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 2.57H21.43a.86.86 0 0 1 .857.857V20.57a.86.86 0 0 1-.857.857H2.572a.86.86 0 0 1-.858-.857V3.427a.86.86 0 0 1 .857-.857Zm18 10.5V4.285H3.43v11.871l3.728-3.086c.257-.257.686-.257.986-.085l3.686 2.185L16.5 9.727c.172-.171.386-.3.643-.3s.514.129.643.3l2.785 3.343ZM3.43 18.385v1.328h17.143v-3.986l-3.43-4.114-4.5 5.229a.85.85 0 0 1-1.07.171L7.8 14.742 3.43 18.385Zm6.857-9.816a2.579 2.579 0 0 1-2.572 2.572 2.579 2.579 0 0 1-2.571-2.572 2.579 2.579 0 0 1 2.571-2.571 2.579 2.579 0 0 1 2.572 2.571Zm-1.715 0a.86.86 0 0 0-.857-.857.86.86 0 0 0-.857.857.86.86 0 0 0 .857.858.86.86 0 0 0 .857-.858Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

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

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface InfoCircleFillIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const InfoCircleFill: React.FunctionComponent<InfoCircleFillIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<InfoCircleFill filled /> is now deprecated, please use <InfoCircleFillFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-info-circle-fill ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'info-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.286Zm1.286-14.143a1.286 1.286 0 1 1-2.572 0 1.286 1.286 0 0 1 2.572 0Zm-.429 3v6h-1.714v-6h1.714Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/info-circle.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface InfoCircleIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const InfoCircle: React.FunctionComponent<InfoCircleIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<InfoCircle filled /> is now deprecated, please use <InfoCircleFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-info-circle ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'info-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.572ZM12 8.57a1.286 1.286 0 1 0 0-2.572 1.286 1.286 0 0 0 0 2.572Zm.857 1.717h-1.714v6.857h1.714v-6.857Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/info.tsx

@@ -0,0 +1,49 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface InfoIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Info: React.FunctionComponent<InfoIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Info filled /> is now deprecated, please use <InfoFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-info ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'info-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.143 9.857h1.714v9.857h-1.714z" />
+            <circle cx="12" cy="6" r="1.714" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/insert-card.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface InsertCardIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const InsertCard: React.FunctionComponent<InsertCardIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<InsertCard filled /> is now deprecated, please use <InsertCardFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-insert-card ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'insert-card-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 5.999V2.57a.86.86 0 0 1 .857-.857H21.43a.86.86 0 0 1 .857.857v2.571H20.57V3.427H3.43V6H1.714Zm15.429 16.288H6.857A.86.86 0 0 1 6 21.43V6.002a.86.86 0 0 1 .857-.857h10.286a.86.86 0 0 1 .857.857V21.43a.86.86 0 0 1-.857.857Zm-9.429-1.714h8.572V6.86H7.714v13.714Zm1.714-12h1.715v2.57H9.428v-2.57Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/insights.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface InsightsIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Insights: React.FunctionComponent<InsightsIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Insights filled /> is now deprecated, please use <InsightsFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-insights ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'insights-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.975 2.193a.859.859 0 0 0-1.157-.386.859.859 0 0 0-.386 1.157c.215.429.729.6 1.157.386a.859.859 0 0 0 .386-1.157ZM7.504 3.394c-.386-.3-.9-.257-1.2.129-.3.385-.257.9.129 1.2.385.3.9.257 1.2-.129.3-.386.257-.9-.129-1.2ZM3.775 6.481c.086-.472.557-.729 1.029-.6.471.128.728.6.6 1.028-.086.472-.557.686-1.029.6-.471-.086-.728-.557-.6-1.028Zm-.471 2.74c-.471.086-.771.514-.729.986.086.471.515.771.986.728.472-.043.772-.514.729-.986-.086-.471-.515-.771-.986-.728Zm18.085.557c.129.428-.085.943-.514 1.114-.428.172-.986-.085-1.114-.514-.129-.429.085-.986.514-1.114.429-.129.943.085 1.114.514Zm-1.37-2.489a.829.829 0 0 0 0-1.2.829.829 0 0 0-1.2 0 .829.829 0 0 0 0 1.2c.342.343.9.343 1.2 0Zm-2.7-4.068a.855.855 0 0 1 .514 1.114c-.172.471-.643.686-1.114.514a.855.855 0 0 1-.515-1.114.855.855 0 0 1 1.115-.514Zm-2.658-.685c-.043-.471-.428-.857-.9-.814-.471.043-.857.429-.814.9.043.471.428.857.9.814.471 0 .814-.428.814-.9ZM5.575 10.98c0-3.642 2.786-6.428 6.429-6.428 3.643 0 6.429 2.785 6.429 6.428 0 2.143-1.372 4.715-3 6v3c0 1.672-1.972 2.572-3.43 2.572-1.456 0-3.428-.9-3.428-2.572v-3c-1.628-1.285-3-3.857-3-6Zm4.715 9c0 .343.9.858 1.714.858s1.714-.515 1.714-.858v-.857H10.29v.857Zm3.428-3.428c0-.3.129-.557.386-.729 1.329-.857 2.614-3.214 2.614-4.843 0-2.7-2.014-4.714-4.714-4.714-2.7 0-4.714 2.014-4.714 4.714 0 1.629 1.285 3.986 2.614 4.843a.842.842 0 0 1 .386.729v.857h3.428v-.857Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/instagram.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface InstagramIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Instagram: React.FunctionComponent<InstagramIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Instagram filled /> is now deprecated, please use <InstagramFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-instagram ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'instagram-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 3.558c2.743 0 3.086 0 4.157.043.986.042 1.543.214 1.929.342.471.172.814.429 1.2.772.342.343.6.686.771 1.2.129.343.3.9.343 1.928.043 1.072.043 1.415.043 4.158 0 2.742 0 3.085-.043 4.157-.043.985-.214 1.543-.343 1.928-.171.472-.428.815-.771 1.2-.343.343-.686.6-1.2.772-.343.128-.9.3-1.929.343-1.071.042-1.414.042-4.157.042-2.743 0-3.086 0-4.157-.042-.986-.043-1.543-.215-1.929-.343-.471-.172-.814-.429-1.2-.772-.343-.343-.6-.685-.771-1.2-.129-.343-.3-.9-.343-1.928-.043-1.072-.043-1.415-.043-4.157 0-2.743 0-3.086.043-4.158.043-.985.214-1.542.343-1.928.171-.472.428-.814.771-1.2.343-.343.686-.6 1.2-.772.343-.128.9-.3 1.929-.342 1.071-.043 1.414-.043 4.157-.043Zm0-1.843c-2.786 0-3.129 0-4.243.043-1.114.043-1.843.214-2.486.471-.685.257-1.242.6-1.842 1.2a5.072 5.072 0 0 0-1.2 1.843c-.258.643-.43 1.414-.472 2.486-.043 1.114-.043 1.457-.043 4.243 0 2.785 0 3.128.043 4.242.043 1.115.214 1.843.472 2.486.257.686.6 1.243 1.2 1.843a5.073 5.073 0 0 0 1.842 1.2c.643.257 1.415.429 2.486.471 1.114.043 1.457.043 4.243.043 2.786 0 3.129 0 4.243-.043 1.114-.042 1.843-.214 2.486-.471.685-.257 1.242-.6 1.842-1.2a5.074 5.074 0 0 0 1.2-1.843c.258-.643.429-1.414.472-2.486.043-1.114.043-1.457.043-4.242 0-2.786 0-3.129-.043-4.243-.043-1.115-.214-1.843-.472-2.486-.257-.686-.6-1.243-1.2-1.843a5.072 5.072 0 0 0-1.843-1.2c-.642-.257-1.414-.428-2.485-.471-1.114-.043-1.457-.043-4.243-.043Zm0 5.014a5.268 5.268 0 0 0-5.271 5.27 5.268 5.268 0 0 0 5.27 5.272A5.268 5.268 0 0 0 17.272 12 5.268 5.268 0 0 0 12 6.729Zm0 8.7a3.439 3.439 0 0 1-3.429-3.43A3.439 3.439 0 0 1 12 8.572 3.439 3.439 0 0 1 15.428 12 3.439 3.439 0 0 1 12 15.428Zm6.729-8.915a1.243 1.243 0 1 1-2.486 0 1.243 1.243 0 0 1 2.486 0Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/insurance.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface InsuranceIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Insurance: React.FunctionComponent<InsuranceIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Insurance filled /> is now deprecated, please use <InsuranceFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-insurance ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'insurance-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.664 4.286c.429 0 .814.3.857.729l.006.07c.1 1.067 1.271 13.69-9.177 17.158-.086.043-.172.043-.257.043-.086 0-.172 0-.258-.043C1.342 18.718 2.57 6 2.66 5.068l.005-.053c.043-.429.429-.729.857-.729 5.529 0 7.972-2.314 7.972-2.314a.829.829 0 0 1 1.2 0s2.528 2.314 7.971 2.314ZM12.093 20.53c3.771-1.328 6.257-4.243 7.285-8.657.565-2.339.56-4.488.558-5.662V6c-4.2-.17-6.729-1.542-7.8-2.314-1.072.772-3.6 2.143-7.8 2.315-.086 1.114-.129 3.428.471 5.871 1.029 4.371 3.471 7.286 7.286 8.657Zm-.858-13.67h1.715v4.286h4.285v1.714H12.95v4.286h-1.715V12.86H6.95v-1.714h4.285V6.86Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/interac.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface InteracIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Interac: React.FunctionComponent<InteracIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Interac filled /> is now deprecated, please use <InteracFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-interac ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'interac-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.571 1.714H3.43A1.714 1.714 0 0 0 1.714 3.43v17.143a1.714 1.714 0 0 0 1.714 1.714h17.143a1.714 1.714 0 0 0 1.715-1.714V3.429a1.714 1.714 0 0 0-1.715-1.715Zm.126 4.483a.631.631 0 1 0 .7-1.05.631.631 0 0 0-.7 1.05Zm.044-.984a.552.552 0 1 1 .613.918.552.552 0 0 1-.613-.918Zm-.522 1.566c-1.252.284-1.543 1.174-1.505 2.296.04 1.15.288 1.882 1.555 1.585.92-.214 1.41-.8 1.412-1.732v-.152l-.978.23-.003.189c-.006.285-.056.61-.427.686-.426.09-.523-.236-.523-.946v-.033c-.001-.04-.002-.112-.002-.293 0-.698.15-1.05.52-1.143.312-.078.43.085.43.514v.136l.98-.233v-.066c0-.361-.058-.62-.205-.81-.154-.201-.457-.409-1.254-.228Zm-7.02 1.76.002 3.683 1.016-.237V9.952c0-.468.178-.774.534-.914.16-.067.33-.103.504-.105v-.94a.553.553 0 0 0-.268.018c-.578.148-.827.783-.827.783V8.31l-.961.228Zm-5.223 3.818c0 .828.156 1.063.156 1.063l1.093-.26s-.226-.162-.226-1.012v-1.867l.723-.171v-.755l-.723.171v-.823l-1.022.241v.824l-.496.117v.755l.495-.117v1.834Zm1.853-1.128c0-.655.093-1.133.293-1.5.238-.434.629-.718 1.198-.848 1.121-.255 1.526.41 1.51 1.3-.006.318-.004.473-.004.473l-1.976.464v.032c0 .622.13.917.524.833.341-.071.436-.285.463-.548.004-.043.006-.151.006-.151l.926-.222s.002.076 0 .161c-.008.353-.11 1.23-1.397 1.534-1.218.29-1.543-.455-1.543-1.528Zm1.532-1.661c-.328.074-.5.395-.507.927l.994-.237c.002-.024.002-.077.002-.16-.002-.402-.126-.614-.49-.53Zm3.969 1.077c0-.853.5-1.123 1.252-1.434.677-.28.691-.419.694-.662.004-.205-.091-.38-.428-.294a.508.508 0 0 0-.408.482 1.78 1.78 0 0 0-.006.189l-.949.224a1.886 1.886 0 0 1 .066-.56c.152-.51.601-.854 1.378-1.034 1.01-.232 1.346.21 1.347.9v1.63c0 .79.146.905.146.905l-.93.22a2.023 2.023 0 0 1-.126-.334s-.203.514-.907.68c-.738.173-1.13-.284-1.13-.912Zm1.94-1.165c-.157.11-.323.207-.496.29-.31.152-.45.339-.45.627 0 .25.154.414.435.344.301-.076.51-.357.51-.748V9.48ZM2.485 15.918a.59.59 0 0 0 .424.071c.077-.016.454-.103.77-.179l.021-.005V14.75l-1.39.329-.011.003-.007.008a.591.591 0 0 0 .193.83Zm.302 1.435a.59.59 0 0 1-.495-.911l.007-.01.01-.003 1.391-.328v1.056l-.021.006c-.316.075-.693.163-.77.178a.632.632 0 0 1-.122.012Zm-.417 1.18a.59.59 0 0 0 .539.161c.067-.015.436-.098.77-.178l.021-.006v-1.056l-1.401.33-.007.01a.59.59 0 0 0 .078.738Zm.253-3.825V8.799L3.7 8.545v5.908l-1.077.255Zm2.489-.973a.665.665 0 0 1 .194.47l.003 2.789v.38a.143.143 0 1 0 .287 0V14.79l1.677 1.138a.87.87 0 0 1 .386.725v2.569l-.001 2.304-1.881.002a1.802 1.802 0 0 1-1.799-1.8v-5.522a.665.665 0 0 1 1.134-.47Zm1.092-3.65a1.453 1.453 0 0 0-.959.741v-.415l-.97.23.001 2.651a.992.992 0 0 1 1.022.179v-1.712c0-.41.204-.738.495-.802.22-.049.403.03.403.42v2.499l1.022-.24v-2.643c0-.64-.247-1.088-1.014-.908Zm14.614-4.79h.272a.178.178 0 0 1 .196.199c0 .1-.045.177-.129.19v.001c.077.008.117.05.12.159l.002.053.003.103a.079.079 0 0 0 .037.067h-.14a.128.128 0 0 1-.02-.069c-.003-.03-.003-.058-.004-.09l-.001-.055c-.002-.084-.028-.12-.113-.12h-.1v.334h-.123v-.771Zm.221.344a.113.113 0 0 0 .123-.125c0-.082-.035-.125-.116-.125h-.105v.25h.098Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/investments.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface InvestmentsIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Investments: React.FunctionComponent<InvestmentsIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Investments filled /> is now deprecated, please use <InvestmentsFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-investments ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'investments-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="M18 18.856V3.428h-1.714v15.428h-3.429V7.713h-1.714v11.143H7.714v-6H6v6H4.286v1.715h15.428v-1.715H18Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};