@westpac/ui 0.1.0

package/src/components/icon/components/take-out-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function TakeOutIcon({ 'aria-label': ariaLabel = 'Take Out', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M3,5 L21,5 L18.99,22.23 C18.87,23.23 18.03,24 17,24 L7,24 C5.97,24 5.13,23.23 5.01,22.23 L3,5 Z M12,20 C13.66,20 15,18.66 15,17 C15,15 12,11.6 12,11.6 C12,11.6 9,15 9,17 C9,18.66 10.34,20 12,20 Z M5,2 L8,0 L16,0 L19,2 L21,2 L22,4 L2,4 L3,2 L5,2 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/telephone-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function TelephoneIcon({ 'aria-label': ariaLabel = 'Telephone', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M5.90003732,0 C5.72003732,0 5.53703732,0.0585 5.38403732,0.177 L3.66878732,1.497 L8.42303732,7.719 L10.1367873,6.40125 L10.1367873,6.39975 C10.5275373,6.099 10.5642873,5.56275 10.2897873,5.2035 L10.2912873,5.199 L6.56828732,0.33 C6.40028732,0.1125 6.15278732,0 5.90003732,0 L5.90003732,0 Z M17.7860373,15.55875 C17.6052873,15.55875 17.4230373,15.6165 17.2692873,15.73425 L15.5577873,17.05575 L20.2055373,23.1405 L21.9170373,21.82425 L21.9185373,21.82125 C22.3092873,21.51825 22.3467873,20.98425 22.0715373,20.625 L22.0715373,20.62125 L18.4505373,15.88875 C18.2862873,15.67125 18.0372873,15.55875 17.7860373,15.55875 L17.7860373,15.55875 Z M7.95578732,8.07975 C7.07303732,8.75775 7.68203732,9.97575 8.39828732,11.15175 C9.41528732,12.828 10.6445373,14.3565 11.7335373,15.51825 C12.9950373,16.86225 13.8027873,17.64075 14.4905373,17.64075 C14.7012873,17.64075 14.9015373,17.568 15.0987873,17.41575 L19.7352873,23.48625 C19.4300373,23.7315 18.7257873,24 17.6997873,24 C15.3327873,24 11.2542873,22.56675 6.43553732,16.09275 C-0.124712677,7.287 2.27153732,2.7555 3.19703732,1.85925 L7.95578732,8.07975 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/thumb-down-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ThumbDownIcon({ 'aria-label': ariaLabel = 'Thumb Down', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M16,4 L7,4 C6.17,4 5.46,4.5 5.16,5.22 L2.14,12.27 C2.05,12.5 2,13.5 2,14 C2,15.5 2.5,16 4,16 L10,16 L9.36,21.57 L9.33,21.89 C9.33,22.3 9.5,22.68 9.77,22.95 L10.83,24 L17.42,17.41 C17.78,17.05 18,16.55 18,16 L18,6 C18,4.9 17.1,4 16,4 Z M20,4 L20,16 L24,16 L24,4 L20,4 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/thumb-up-icon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ThumbUpIcon({ 'aria-label': ariaLabel = 'Thumb Up', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M14,0 L5,0 C4.17,0 3.46,0.5 3.16,1.22 L0.14,8.27 C0.05,8.5 0,9.5 0,10 C7.34788079e-17,11.5 0.5,12 2,12 L8,12 L7.36,17.57 L7.33,17.89 C7.33,18.3 7.5,18.68 7.77,18.95 L8.83,20 L15.42,13.41 C15.78,13.05 16,12.55 16,12 L16,2 C16,0.9 15.1,0 14,0 Z M18,0 L18,12 L22,12 L22,0 L18,0 Z"
+        transform="rotate(180 11 10)"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/tick-circle-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function TickCircleIcon({ 'aria-label': ariaLabel = 'Tick', copyrightYear = '2021', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M12 0c6.628 0 12 5.373 12 12s-5.372 12-12 12S0 18.627 0 12 5.372 0 12 0zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm6.064 4.137l1.4 1.399L8.6 18.4l-4.964-4.965 1.4-1.4L8.6 15.6l9.464-9.463z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/tick-icon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function TickIcon({ 'aria-label': ariaLabel = 'Tick', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <polygon fill="currentColor" fillRule="evenodd" points="8.6 15.6 4.4 11.4 3 12.8 8.6 18.4 20.6 6.4 19.2 5" />
+    </Icon>
+  );
+}

package/src/components/icon/components/transfer-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function TransferIcon({ 'aria-label': ariaLabel = 'Transfer', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M12,12 L16,12 L16,8 L24,16 L16,24 L16,20 L12,20 L12,12 Z M0,8 L8,0 L8,4 L12,4 L12,12 L8,12 L8,16 L0,8 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/transport-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function TransportIcon({ 'aria-label': ariaLabel = 'Transport', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M16,22 L8,22 L8,23 C8,23.5522847 7.55228475,24 7,24 L5,24 C4.44771525,24 4,23.5522847 4,23 L4,22 L3,22 C2.44771525,22 2,21.5522847 2,21 L2,2 C2,0.8954305 2.8954305,2.02906125e-16 4,0 L20,0 C21.1045695,-2.02906125e-16 22,0.8954305 22,2 L22,21 C22,21.5522847 21.5522847,22 21,22 L20,22 L20,23 C20,23.5522847 19.5522847,24 19,24 L17,24 C16.4477153,24 16,23.5522847 16,23 L16,22 L16,22 Z M6,18 C7.1045695,18 8,17.1045695 8,16 C8,14.8954305 7.1045695,14 6,14 C4.8954305,14 4,14.8954305 4,16 C4,17.1045695 4.8954305,18 6,18 Z M18,18 C19.1045695,18 20,17.1045695 20,16 C20,14.8954305 19.1045695,14 18,14 C16.8954305,14 16,14.8954305 16,16 C16,17.1045695 16.8954305,18 18,18 Z M4,4 L4,12 L20,12 L20,4 L4,4 Z M9,2 L9,3 L15,3 L15,2 L9,2 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/twitter-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function TwitterIcon({ 'aria-label': ariaLabel = 'Twitter', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M2,0 L22,0 L22,0 C23.1045695,-2.02906125e-16 24,0.8954305 24,2 L24,22 L24,22 C24,23.1045695 23.1045695,24 22,24 L2,24 L2,24 C0.8954305,24 1.3527075e-16,23.1045695 0,22 L0,2 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M21.609,5.9355 C20.9025,6.255 20.142,6.47025 19.344,6.567 C20.15775,6.0705 20.7825,5.28375 21.078,4.34775 C20.316,4.80675 19.47225,5.13975 18.57375,5.3205 C17.8545,4.54125 16.83,4.05375 15.69525,4.05375 C13.51875,4.05375 11.7525,5.85075 11.7525,8.0655 C11.7525,8.3805 11.787,8.6865 11.8545,8.9805 C8.57775,8.81325 5.673,7.21575 3.7275,4.78875 C3.38775,5.38125 3.1935,6.0705 3.1935,6.8055 C3.1935,8.1975 3.80925,9.426 4.86675,10.14525 C4.221,10.12425 3.75,9.94425 3,9.64275 L3,9.69375 C3,11.637 4.44,13.2585 6.243,13.6275 C5.913,13.719 5.60475,13.76775 5.24475,13.76775 C4.99125,13.76775 4.76475,13.743 4.52325,13.6965 C5.02575,15.29025 6.492,16.4505 8.217,16.48275 C6.86775,17.559 5.17275,18.20025 3.3255,18.20025 C3.00675,18.20025 2.6955,18.18075 2.388,18.14325 C4.1325,19.28175 6.20625,19.947 8.433,19.947 C15.6855,19.947 19.65225,13.83225 19.65225,8.5305 C19.65225,8.35725 19.6485,8.18325 19.641,8.0115 C20.41125,7.446 21.081,6.7395 21.609,5.9355 L21.609,5.9355 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/umbrella-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function UmbrellaIcon({ 'aria-label': ariaLabel = 'Umbrella', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M9,22 C7.8954305,22 7,21.1045695 7,20 L5,20 C5,22.209139 6.790861,24 9,24 C11.209139,24 13,22.209139 13,20 L13,12 L23.9178524,12 C23.4380073,6.18357693 18.8100281,1.54335515 12.9990298,1.04444955 C13,0.44771525 12.5522847,0 12,0 C11.4477153,0 11,0.44771525 11,1 C5.15134535,1.49983643 0.482096586,6.15628579 0,12 L11,12 L11,20 C11,21.1045695 10.1045695,22 9,22 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/upload-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function UploadIcon({ 'aria-label': ariaLabel = 'Upload', copyrightYear = '2021', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M12 2a7 7 0 016.919 8.071A6 6 0 0118 22H7A7 7 0 015.036 8.28 7.002 7.002 0 0112 2zm0 7l-5 5h3v4h4v-4h3l-5-5z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/verified-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function VerifiedIcon({ 'aria-label': ariaLabel = 'Verified', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M12,8.8817842e-16 L22,4.5 L22,11 C22,17.0545455 17.7333333,22.6254545 12,24 C6.26666667,22.6254545 2,17.0545455 2,11 L2,4.5 L12,8.8817842e-16 Z M7.4,12.1426407 L6,13.5426407 L10.136039,17.6786797 L19.4147186,8.4 L18.0147186,7 L10.136039,14.8786797 L7.4,12.1426407 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/video-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function VideoIcon({ 'aria-label': ariaLabel = 'Video', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M18,10.375 L24,5.5 L24,18.5 L18,13.625 L18,18 C18,19.1045695 17.1045695,20 16,20 L2,20 C0.8954305,20 1.3527075e-16,19.1045695 0,18 L0,6 L0,6 C-1.3527075e-16,4.8954305 0.8954305,4 2,4 L2,4 L16,4 C17.1045695,4 18,4.8954305 18,6 L18,10.375 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/visibility-icon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function VisibilityIcon({
+  'aria-label': ariaLabel = 'Visibility',
+  copyrightYear = '2021',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M12 4C6.545 4 1.887 7.317 0 12c1.887 4.683 6.545 8 12 8s10.113-3.317 12-8c-1.887-4.683-6.545-8-12-8zm0 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/visibility-off-icon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function VisibilityOffIcon({
+  'aria-label': ariaLabel = 'Visibility off',
+  copyrightYear = '2021',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M2.21 1.936L18.534 18.26l3.475 3.475-1.414 1.414-3.982-3.982A13.097 13.097 0 0112 20c-5.455 0-10.113-3.317-12-8a12.708 12.708 0 014.097-5.35l-3.3-3.3L2.21 1.936zM12 4c5.455 0 10.113 3.317 12 8a12.693 12.693 0 01-3.79 5.108l-3.481-3.48a5.002 5.002 0 00-6.356-6.356L7.79 4.688A13.115 13.115 0 0112 4zM7.425 9.98a5.002 5.002 0 006.595 6.595l-1.604-1.603a2.996 2.996 0 01-3.387-3.388zm4.68-.978A2.996 2.996 0 0115 12l-.004-.106z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/voice-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function VoiceIcon({ 'aria-label': ariaLabel = 'Voice', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M10,19.7769836 C6.30831435,18.9392957 3.47856125,15.8322384 3.05492878,12 L5.07088886,12 C5.55611852,15.3922941 8.47352809,18 12,18 C15.5264719,18 18.4438815,15.3922941 18.9291111,12 L20.9450712,12 C20.5214388,15.8322384 17.6916857,18.9392957 14,19.7769836 L14,24 L10,24 L10,19.7769836 Z M16,4 L16,11 C16,13.209139 14.209139,15 12,15 C9.790861,15 8,13.209139 8,11 L8,4 C8,1.790861 9.790861,0 12,0 C14.209139,0 16,1.790861 16,4 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/walk-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function WalkIcon({ 'aria-label': ariaLabel = 'Walk', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M5.5,24 L8.5,8 L6,9 L6,13 L4,13 L4,7.5 C7.42553417,6.12003774 9.24878998,5.39029878 9.46976744,5.31078313 C9.80123363,5.19150966 10.3627907,5.02325581 10.6976744,5.02325581 C11.4790698,5.02325581 12.1488372,5.46976744 12.5953488,6.13953488 L13.7116279,7.9255814 C14.6046512,9.48837209 16.3906977,11 18.5116279,11 L18.5116279,13 C16.055814,13 13.9511628,11.6744186 12.5,10 L12,13.5 L14,16 L14.0465116,24 L12,24 L12,17 L9.5,15 L7.5,24 L5.5,24 Z M13.25,4.5 C12.0125,4.5 11,3.4875 11,2.25 C11,1.0125 12.0125,0 13.25,0 C14.4875,0 15.5,1.0125 15.5,2.25 C15.5,3.4875 14.4875,4.5 13.25,4.5 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/wallet-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function WalletIcon({ 'aria-label': ariaLabel = 'Wallet', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M21.4142136,2.58578644 C21.7761424,2.94771525 22,3.44771525 22,4 L22,6 L14,6 C12.8954305,6 12,6.8954305 12,8 L12,16 C12,17.1045695 12.8954305,18 14,18 L22,18 L22,20 C22,21.1045695 21.1045695,22 20,22 L2,22 C0.8954305,22 1.52655666e-16,21.1045695 0,20 L0,4 C-3.05311332e-16,2.8954305 0.8954305,2 2,2 L20,2 C20.5522847,2 21.0522847,2.22385763 21.4142136,2.58578644 Z M14,8 L23,8 C23.5522847,8 24,8.44771525 24,9 L24,15 C24,15.5522847 23.5522847,16 23,16 L14,16 L14,8 Z M18.5,13.5 C19.3284271,13.5 20,12.8284271 20,12 C20,11.1715729 19.3284271,10.5 18.5,10.5 C17.6715729,10.5 17,11.1715729 17,12 C17,12.8284271 17.6715729,13.5 18.5,13.5 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/warning-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function WarningIcon({ 'aria-label': ariaLabel = 'Warning', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="nonzero"
+        d="M12.708.293l10.999 11c.39.39.39 1.024 0 1.415l-11 10.999c-.39.39-1.024.39-1.415 0l-10.999-11a1.001 1.001 0 010-1.415l11-10.999c.39-.39 1.024-.39 1.415 0zm-.709 2.124L2.416 12l9.583 9.583L21.583 12l-9.584-9.583zM13 16v2h-2v-2h2zm0-10v8h-2V6h2z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/watch-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function WatchIcon({ 'aria-label': ariaLabel = 'Watch', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M20,12 C20,9.46 18.81,7.19 16.96,5.73 L16,0 L8,0 L7.05,5.73 C5.19,7.19 4,9.45 4,12 C4,14.55 5.19,16.81 7.05,18.27 L8,24 L16,24 L16.96,18.27 C18.81,16.81 20,14.54 20,12 Z M6,12 C6,8.69 8.69,6 12,6 C15.31,6 18,8.69 18,12 C18,15.31 15.31,18 12,18 C8.69,18 6,15.31 6,12 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/wearable-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function WearableIcon({ 'aria-label': ariaLabel = 'Wearable', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M14,22 L14,22 L14,19 L17,19 C19.209139,19 21,17.209139 21,15 C21,12.790861 19.209139,11 17,11 L7,11 C4.790861,11 3,12.790861 3,15 C3,17.209139 4.790861,19 7,19 L10,19 L10,22 L7,22 C3.13400675,22 0,18.8659932 0,15 C0,11.1340068 3.13400675,8 7,8 L17,8 C20.8659932,8 24,11.1340068 24,15 C24,18.8659932 20.8659932,22 17,22 L14,22 Z M7,2 L17,2 C17.5522847,2 18,2.44771525 18,3 L18,6 L6,6 L6,3 L6,3 C6,2.44771525 6.44771525,2 7,2 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/wheelchair-icon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function WheelchairIcon({
+  'aria-label': ariaLabel = 'Wheelchair',
+  copyrightYear = '2020',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M8,13.2070325 C5.6914952,13.8599614 4,15.9824458 4,18.5 C4,21.5375661 6.46243388,24 9.5,24 C12.0175542,24 14.1400386,22.3085048 14.7929675,20 L12.6631844,20 C12.1014525,21.1824737 10.896198,22 9.5,22 C7.56700338,22 6,20.4329966 6,18.5 C6,17.103802 6.81752633,15.8985475 8,15.3368156 L8,13.2070325 L8,13.2070325 Z M20,13.5 C18,13.5 15.423,12.677 14.004,11.5 L14.004,15 L17.5,15 C19.5,15 20,16 20,17.5 L20,23 L18,23 L18,17.9875609 L12.2,17.9875609 C10.99,17.9875609 10,17 10,16 L10,9.5 C10,8 11.0000088,7 12,7 C12.5,7 13.0709844,7 14.004,8 C14.9370156,9 14.9227264,9.34205666 16.0193557,10.1324001 C17.1159849,10.9227436 18.5,11.5 20,11.5 L20,13.5 Z M12.25,6.5 C11.0073593,6.5 10,5.49264069 10,4.25 C10,3.00735931 11.0073593,2 12.25,2 C13.4926407,2 14.5,3.00735931 14.5,4.25 C14.5,5.49264069 13.4926407,6.5 12.25,6.5 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/windows-new-icon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function WindowsNewIcon({
+  'aria-label': ariaLabel = 'Windows New',
+  copyrightYear = '2020',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M23.9968,0 L11.2,1.8616 L11.2,11.1992 L23.9968,11.1992 L23.9968,0 Z M0,3.3984 L0.0088,11.1992 L9.6,11.1992 L9.6,2.0944 L0,3.3984 Z M11.2,12.7992 L11.2,22.2 L23.9968,24 L24,12.7992 L11.2,12.7992 Z M0.0072,12.7992 L0.008,20.6816 L9.6,21.996 L9.6,12.7992 L0.0072,12.7992 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/word-file-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function WordFileIcon({ 'aria-label': ariaLabel = 'Word File', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M4,0 L16,0 L22,6 L22,22 C22,23.1045695 21.1045695,24 20,24 L4,24 C2.8954305,24 2,23.1045695 2,22 L2,2 L2,2 C2,0.8954305 2.8954305,2.02906125e-16 4,0 L4,0 Z M4,2 L4,22 L20,22 L20,6 L16,6 L16,2 L4,2 Z M14.5697731,10 L18,10 L15.3919202,20 L13.3722839,20 L11.9990343,14.0870163 L10.4648318,20 L8.27458555,20 L6,10 L8.24110736,10 L9.40318687,16.2124148 L10.9547723,10 L13.0986641,10 L14.4339289,16.2124148 L15.4595204,11.7940864 L14.5697731,11.7940864 L14.5697731,10 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/write-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function WriteIcon({ 'aria-label': ariaLabel = 'Write', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M0,22 L24,22 L24,24 L0,24 L0,22 Z M2,15.0006943 L2,20 L6.99930565,20 L17.7439245,9.2553812 L12.7446188,4.25607555 L2,15.0006943 Z M21.6100542,5.38925149 C22.1299819,4.86932371 22.1299819,4.02944036 21.6100542,3.50951257 L18.4904874,0.389945841 C17.9705596,-0.129981947 17.1306763,-0.129981947 16.6107485,0.389945841 L14.1710873,2.829607 L19.170393,7.82891265 L21.6100542,5.38925149 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/yammer-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function YammerIcon({ 'aria-label': ariaLabel = 'Yammer', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M1.5,0 L22.5,0 C23.3284271,-1.52179594e-16 24,0.671572875 24,1.5 L24,22.5 C24,23.3284271 23.3284271,24 22.5,24 L1.5,24 C0.671572875,24 1.8778099e-15,23.3284271 1.77635684e-15,22.5 L1.77635684e-15,1.5 L1.77635684e-15,1.5 C1.67490378e-15,0.671572875 0.671572875,1.52179594e-16 1.5,0 L1.5,0 Z M20.9625,13.4955 C21.4365,13.413 21.78,12.984 21.74775,12.49425 C21.717,12.06375 21.405,11.72025 21.0045,11.63175 C20.96475,11.6295 20.92425,11.6295 20.8815,11.6295 C20.16375,11.631 15.00675,12.1965 15.26475,12.72225 C15.52275,13.242 18.699,13.49475 20.9625,13.4955 Z M19.46175,18.342 C19.7265,17.92875 19.63125,17.3865 19.2555,17.0865 C17.27025,15.999 14.36475,14.691 13.88775,15.02475 C13.4085,15.36 17.65725,18.3375 18.28575,18.68325 C18.324,18.70425 18.36,18.723 18.3945,18.74175 C18.78975,18.8565 19.22775,18.705 19.46175,18.342 Z M18.28575,6.537 C17.65725,6.8835 13.4085,9.86025 13.88775,10.197 C14.36475,10.52925 17.27025,9.222 19.2555,8.1345 C19.63125,7.83375 19.7265,7.29225 19.46175,6.879 C19.22775,6.51525 18.78975,6.36525 18.3945,6.48 C18.36,6.49725 18.324,6.51675 18.28575,6.537 Z M13.44375,5.7795 C13.6065,5.26875 13.323,4.71375 12.81525,4.551 C12.3165,4.392 11.7885,4.6455 11.61,5.13 L8.43525,13.5 L8.38575,13.5 L5.04675,5.067 C4.821,4.58925 4.2615,4.37625 3.7575,4.56525 C3.24075,4.7595 2.97525,5.325 3.14475,5.8455 L7.35,16.10475 C6.75975,17.77275 6.21225,18.55425 4.956,18.55425 C4.83525,18.55425 4.41225,18.52875 4.3845,18.5265 C3.9795,18.5055 3.6015,18.7695 3.492,19.17675 C3.36675,19.6395 3.63825,20.1165 4.09875,20.2485 C4.43175,20.307 4.77375,20.32875 5.0805,20.32875 C7.3965,20.32875 8.1615,18.99525 8.9265,17.049 L13.44375,5.7795 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/youtube-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function YoutubeIcon({ 'aria-label': ariaLabel = 'Youtube', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M2,0 L22,0 L22,0 C23.1045695,-2.02906125e-16 24,0.8954305 24,2 L24,22 L24,22 C24,23.1045695 23.1045695,24 22,24 L2,24 L2,24 C0.8954305,24 1.3527075e-16,23.1045695 0,22 L0,2 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M11.9960967,6 L12.0039033,6 C12.0039033,6 15.7822946,6 18.3011516,6.1725947 C18.6529753,6.21236514 19.4202207,6.2157392 20.1046778,6.89527757 C20.6443523,7.41302826 20.8202377,8.58875342 20.8202377,8.58875342 C20.8202377,8.58875342 21,9.96944419 21,11.3501015 L21,12.6445033 C21,14.0251607 20.8202377,15.4058347 20.8202377,15.4058347 C20.8202377,15.4058347 20.6443523,16.5815766 20.1046778,17.0993273 C19.4202207,17.7788824 18.6529753,17.7822397 18.3011516,17.8220269 C15.7822946,17.9946048 12.0000088,18 12.0000088,18 C12.0000088,18 7.32010996,17.9594946 5.88007331,17.8286079 C5.47945419,17.757402 4.58004364,17.7788824 3.89532223,17.0993273 C3.35564771,16.5815766 3.18000899,15.4058347 3.18000899,15.4058347 C3.18000899,15.4058347 3,14.0251607 3,12.6445033 L3,11.3501015 C3,9.96944419 3.18000899,8.58875342 3.18000899,8.58875342 C3.18000899,8.58875342 3.35564771,7.41302826 3.89532223,6.89527757 C4.58004364,6.2157392 5.34698942,6.21236514 5.6988484,6.1725947 C8.21779355,6 11.9960967,6 11.9960967,6 Z M10,9 L10,15 L15,12 L10,9 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/zip-file-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ZipFileIcon({ 'aria-label': ariaLabel = 'Zip File', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M4,0 L16,0 L22,6 L22,22 C22,23.1045695 21.1045695,24 20,24 L4,24 C2.8954305,24 2,23.1045695 2,22 L2,2 L2,2 C2,0.8954305 2.8954305,2.02906125e-16 4,0 L4,0 Z M4,2 L4,22 L20,22 L20,6 L16,6 L16,2 L4,2 Z M7,20 L11,20 L11,18 L7,18 L7,20 Z M9,16 L12,16 L12,14 L9,14 L9,16 Z M6,14 L9,14 L9,12 L6,12 L6,14 Z M9,12 L12,12 L12,10 L9,10 L9,12 Z M6,10 L9,10 L9,8 L6,8 L6,10 Z M9,8 L12,8 L12,6 L9,6 L9,8 Z M6,6 L6,4 L9,4 L9,6 L6,6 Z M6,16 L12,16 L12,20 C12,20.5522847 11.5522847,21 11,21 L7,21 C6.44771525,21 6,20.5522847 6,20 L6,16 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/icon.component.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { styles } from './icon.styles.js';
+import { type IconProps } from './icon.types.js';
+
+export function Icon({
+  copyrightYear = '',
+  xmlns = 'http://www.w3.org/2000/svg',
+  viewBox = '0 0 24 24',
+  role = 'img',
+  focusable = 'false',
+  children,
+  className,
+  size = 'medium',
+  color,
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      xmlns={xmlns}
+      viewBox={viewBox}
+      role={role}
+      focusable={focusable}
+      className={styles({ size, color, className })}
+      {...props}
+    >
+      {copyrightYear && (
+        <metadata>{`Copyright © ${copyrightYear} by Westpac Banking Corporation. All rights reserved.`}</metadata>
+      )}
+      {children}
+    </svg>
+  );
+}