Merge pull request #930 from WestpacGEL/feature/arrow-circle-icons

added: circle arrow icons

.changeset/twenty-jars-repair.md

@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+added icons - arrow circle icons

packages/ui/src/components/icon/components/arrow-back-circle-icon.tsx

@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowBackCircleIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Arrow Back Circle',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12 12-5.373 12-12S18.628 0 12 0ZM9.414 13l3.293 3.293-1.414 1.414L5.586 12l5.707-5.707 1.414 1.414L9.414 11H18v2H9.414Z"
+          clipRule="evenodd"
+        />
+      ) : (
+        <Fragment>
+          <path
+            fill="currentColor"
+            d="m9.414 13 3.293 3.293-1.414 1.414L5.586 12l5.707-5.707 1.414 1.414L9.414 11H18v2H9.414Z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12 12-5.373 12-12S18.628 0 12 0Zm10 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z"
+            clipRule="evenodd"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

packages/ui/src/components/icon/components/arrow-down-circle-icon.tsx

@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowDownCircleIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Arrow Down Circle',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M0 12c0 6.628 5.373 12 12 12s12-5.372 12-12S18.627 0 12 0 0 5.372 0 12Zm13 2.586 3.293-3.293 1.414 1.414L12 18.414l-5.707-5.707 1.414-1.414L11 14.586V6h2v8.586Z"
+          clipRule="evenodd"
+        />
+      ) : (
+        <Fragment>
+          <path
+            fill="currentColor"
+            d="m13 14.586 3.293-3.293 1.414 1.414L12 18.414l-5.707-5.707 1.414-1.414L11 14.586V6h2v8.586Z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M0 12c0 6.628 5.373 12 12 12s12-5.372 12-12S18.627 0 12 0 0 5.372 0 12ZM12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Z"
+            clipRule="evenodd"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

packages/ui/src/components/icon/components/arrow-forward-circle-icon.tsx

@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowForwardCircleIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Arrow Forward Circle',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M12 24c6.628 0 12-5.373 12-12S18.628 0 12 0 0 5.373 0 12s5.372 12 12 12Zm2.586-13-3.293-3.293 1.414-1.414L18.414 12l-5.707 5.707-1.414-1.414L14.586 13H6v-2h8.586Z"
+          clipRule="evenodd"
+        />
+      ) : (
+        <Fragment>
+          <path
+            fill="currentColor"
+            d="m14.586 11-3.293-3.293 1.414-1.414L18.414 12l-5.707 5.707-1.414-1.414L14.586 13H6v-2h8.586Z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M12 24c6.628 0 12-5.373 12-12S18.628 0 12 0 0 5.373 0 12s5.372 12 12 12ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z"
+            clipRule="evenodd"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

packages/ui/src/components/icon/components/arrow-up-circle-icon.tsx

@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowUpCircleIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Arrow Up Circle',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M24 12c0-6.628-5.373-12-12-12S0 5.372 0 12s5.373 12 12 12 12-5.372 12-12ZM11 9.414l-3.293 3.293-1.414-1.414L12 5.586l5.707 5.707-1.414 1.414L13 9.414V18h-2V9.414Z"
+          clipRule="evenodd"
+        />
+      ) : (
+        <Fragment>
+          <path
+            fill="currentColor"
+            d="m11 9.414-3.293 3.293-1.414-1.414L12 5.586l5.707 5.707-1.414 1.414L13 9.414V18h-2V9.414Z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M24 12c0-6.628-5.373-12-12-12S0 5.372 0 12s5.373 12 12 12 12-5.372 12-12ZM12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Z"
+            clipRule="evenodd"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

packages/ui/src/components/icon/index.ts

@@ -6,10 +6,14 @@ export { AlertIcon } from './components/alert-icon.js';
 export { AndroidIcon } from './components/android-icon.js';
 export { AppleIcon } from './components/apple-icon.js';
 export { ArchiveBoxIcon } from './components/archive-box-icon.js';
+export { ArrowBackCircleIcon } from './components/arrow-back-circle-icon.js';
+export { ArrowDownCircleIcon } from './components/arrow-down-circle-icon.js';
 export { ArrowForkIcon } from './components/arrow-fork-icon.js';
+export { ArrowForwardCircleIcon } from './components/arrow-forward-circle-icon.js';
 export { ArrowLeftIcon } from './components/arrow-left-icon.js';
 export { ArrowRightIcon } from './components/arrow-right-icon.js';
 export { ArrowSplitIcon } from './components/arrow-split-icon.js';
+export { ArrowUpCircleIcon } from './components/arrow-up-circle-icon.js';
 export { AtmIcon } from './components/atm-icon.js';
 export { AttacheCaseIcon } from './components/attache-case-icon.js';
 export { AustraliaIcon } from './components/australia-icon.js';