@westpac/ui 0.1.0

package/src/components/icon/components/percent-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 PercentIcon({ 'aria-label': ariaLabel = 'Percent', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M15.1719126,16.2398208 C15.1886586,16.4961075 15.2177821,16.6970596 15.258555,16.8426771 C15.300056,16.9875665 15.3612153,17.0873145 15.4427611,17.1397368 C15.5235788,17.1921591 15.6284234,17.2183702 15.7572949,17.2183702 C15.8847102,17.2183702 15.9895547,17.1921591 16.0711005,17.1397368 C16.1533744,17.0873145 16.2145337,16.9875665 16.2545785,16.8426771 C16.2960795,16.6970596 16.325203,16.4961075 16.341949,16.2398208 C16.3601512,15.983534 16.3688883,15.6566228 16.3688883,15.2612714 C16.3688883,14.8535424 16.3601512,14.525175 16.341949,14.2739849 C16.325203,14.0235228 16.2960795,13.8254831 16.2545785,13.6798656 C16.2145337,13.53352 16.1533744,13.4352282 16.0711005,13.3828059 C15.9895547,13.3303836 15.8847102,13.3041725 15.7572949,13.3041725 C15.6284234,13.3041725 15.5235788,13.3303836 15.4427611,13.3828059 C15.3612153,13.4352282 15.300056,13.53352 15.258555,13.6798656 C15.2177821,13.8254831 15.1886586,14.0235228 15.1719126,14.2739849 C15.1544385,14.525175 15.1457015,14.8535424 15.1457015,15.2612714 C15.1457015,15.6566228 15.1544385,15.983534 15.1719126,16.2398208 L15.1719126,16.2398208 Z M13.1536544,13.7140857 C13.2461215,13.2888827 13.4004761,12.9437693 13.6159899,12.675105 C13.8315038,12.4071689 14.1147298,12.2120414 14.4634836,12.0897228 C14.8136936,11.9674041 15.2447214,11.9062447 15.7572949,11.9062447 C16.2698684,11.9062447 16.7008961,11.9674041 17.050378,12.0897228 C17.39986,12.2120414 17.6816298,12.4071689 17.8971437,12.675105 C18.1126575,12.9437693 18.267012,13.2888827 18.3609353,13.7140857 C18.4541305,14.1400168 18.5,14.6555027 18.5,15.2612714 C18.5,15.86704 18.4541305,16.3817978 18.3609353,16.8070008 C18.267012,17.2322039 18.1126575,17.5795015 17.8971437,17.8467096 C17.6816298,18.1153738 17.39986,18.3017642 17.050378,18.4066088 C16.7008961,18.5107253 16.2698684,18.5631476 15.7572949,18.5631476 C15.2447214,18.5631476 14.8136936,18.5107253 14.4634836,18.4066088 C14.1147298,18.3017642 13.8315038,18.1153738 13.6159899,17.8467096 C13.4004761,17.5795015 13.2461215,17.2322039 13.1536544,16.8070008 C13.0604593,16.3817978 13.0131336,15.86704 13.0131336,15.2612714 C13.0131336,14.6555027 13.0604593,14.1400168 13.1536544,13.7140857 L13.1536544,13.7140857 Z M15.7223467,6 L10.1823299,18.5631476 L8.26090731,18.5631476 L13.7994679,6 L15.7223467,6 Z M7.65805097,10.333576 C7.67552506,10.5898628 7.70392047,10.7908149 7.74542145,10.9364324 C7.78546626,11.0820498 7.8466256,11.1810697 7.92889947,11.233492 C8.00971717,11.2859143 8.11528983,11.3121255 8.24270512,11.3121255 C8.3708485,11.3121255 8.47642117,11.2859143 8.55796696,11.233492 C8.63878465,11.1810697 8.69994399,11.0820498 8.74144497,10.9364324 C8.78221787,10.7908149 8.81134136,10.5898628 8.82881546,10.333576 C8.84628955,10.0772893 8.85429852,9.75110613 8.85429852,9.3550266 C8.85429852,8.94729768 8.84628955,8.61820218 8.82881546,8.36701204 C8.81134136,8.11727807 8.78221787,7.91923831 8.74144497,7.77362083 C8.69994399,7.62800336 8.63878465,7.52898348 8.55796696,7.47656119 C8.47642117,7.4241389 8.3708485,7.39792775 8.24270512,7.39792775 C8.11528983,7.39792775 8.00971717,7.4241389 7.92889947,7.47656119 C7.8466256,7.52898348 7.78546626,7.62800336 7.74542145,7.77362083 C7.70392047,7.91923831 7.67552506,8.11727807 7.65805097,8.36701204 C7.63984878,8.61820218 7.63183982,8.94729768 7.63183982,9.3550266 C7.63183982,9.75110613 7.63984878,10.0772893 7.65805097,10.333576 L7.65805097,10.333576 Z M5.63906469,7.80856903 C5.73225987,7.383366 5.88661439,7.03679642 6.10285634,6.76886026 C6.3183702,6.50092411 6.6008681,6.3057967 6.95035004,6.18274993 C7.29910389,6.06115934 7.73013162,6 8.24270512,6 C8.75527863,6 9.18630636,6.06115934 9.53651638,6.18274993 C9.88527023,6.3057967 10.1677681,6.50092411 10.3840101,6.76886026 C10.5995239,7.03679642 10.7538785,7.383366 10.8470736,7.80856903 C10.9402688,8.23377205 10.9868664,8.74925791 10.9868664,9.3550266 C10.9868664,9.9607953 10.9402688,10.4762812 10.8470736,10.9014842 C10.7538785,11.3266872 10.5995239,11.6732568 10.3840101,11.9411929 C10.1677681,12.2091291 9.88527023,12.4042565 9.53651638,12.5265752 C9.18630636,12.6488939 8.75527863,12.7100532 8.24270512,12.7100532 C7.73013162,12.7100532 7.29910389,12.6488939 6.95035004,12.5265752 C6.6008681,12.4042565 6.3183702,12.2091291 6.10285634,11.9411929 C5.88661439,11.6732568 5.73225987,11.3266872 5.63906469,10.9014842 C5.5458695,10.4762812 5.5,9.9607953 5.5,9.3550266 C5.5,8.74925791 5.5458695,8.23377205 5.63906469,7.80856903 L5.63906469,7.80856903 Z M12,2 C6.47714286,2 2,6.47714286 2,12 C2,17.5228571 6.47714286,22 12,22 C17.5228571,22 22,17.5228571 22,12 C22,6.47714286 17.5228571,2 12,2 M24,12 C24,18.627 18.62775,24 12,24 C5.37225,24 0,18.627 0,12 C0,5.373 5.37225,-8.8817842e-16 12,-8.8817842e-16 C18.62775,-8.8817842e-16 24,5.373 24,12"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/person-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 PersonIcon({ 'aria-label': ariaLabel = 'Person', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M0,21.3333333 L0,24 L24,24 L24,21.3333333 C24,17.7866667 16.005,16 12,16 C7.995,16 0,17.7866667 0,21.3333333 Z M12,12 C15.315,12 18,9.315 18,6 C18,2.685 15.315,0 12,0 C8.685,0 6,2.685 6,6 C6,9.315 8.685,12 12,12"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/phone-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 PhoneIcon({ 'aria-label': ariaLabel = 'Phone', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M7,2 L17,2 C18.1045695,2 19,2.8954305 19,4 L19,22 C19,23.1045695 18.1045695,24 17,24 L7,24 C5.8954305,24 5,23.1045695 5,22 L5,4 L5,4 C5,2.8954305 5.8954305,2 7,2 L7,2 Z M17,19 L17,5 L7,5 L7,19 L17,19 Z M12,23 C12.83,23 13.5,22.33 13.5,21.5 C13.5,20.67 12.83,20 12,20 C11.17,20 10.5,20.67 10.5,21.5 C10.5,22.33 11.17,23 12,23 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/pie-chart-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 PieChartIcon({ 'aria-label': ariaLabel = 'Pie Chart', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M13,0 C18.8434819,0.482903868 23.4975482,5.14094692 23.9599991,11 L13,11 L13,0 Z M0,11.9794279 C0,5.67797979 4.84046948,0.509022045 11,0 L11,13.0222864 L23.9554671,13.0222864 C23.4278192,19.1727741 18.2766744,24 12,24 C5.372583,24 0,18.6182066 0,11.9794279 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/plane-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 PlaneIcon({ 'aria-label': ariaLabel = 'Plane', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M7,24 L7,22.5 L10,20 L10,14 L0,17 L0,15 L10,8 L10,2 C10,0.8954305 10.8954305,0 12,0 C13.1045695,0 14,0.8954305 14,2 L14,8 L24,15 L24,17 L14,14 L14,20 L17,22.5 L17,24 L12,22.5 L7,24 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/play-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 PlayCircleIcon({ 'aria-label': ariaLabel = 'Play', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M24,12 C24,18.627 18.62775,24 12,24 C5.37225,24 0,18.627 0,12 C0,5.373 5.37225,0 12,0 C18.62775,0 24,5.373 24,12 Z M12,2 C6.47714286,2 2,6.47714286 2,12 C2,17.5228571 6.47714286,22 12,22 C17.5228571,22 22,17.5228571 22,12 C22,6.47714286 17.5228571,2 12,2 Z M10,16.5 L10,7.5 L16,12 L10,16.5 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/play-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 PlayIcon({ 'aria-label': ariaLabel = 'Play', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <polygon fill="currentColor" fillRule="evenodd" points="8 5 8 19 19 12" />
+    </Icon>
+  );
+}

package/src/components/icon/components/presets-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 PresetsIcon({ 'aria-label': ariaLabel = 'Presets', copyrightYear = '2021', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M16 13a4.002 4.002 0 013.874 3H24v2h-4.126a4.002 4.002 0 01-7.748 0H0v-2h12.126c.444-1.725 2.01-3 3.874-3zm0 2a2 2 0 100 4 2 2 0 000-4zM8 3a4.002 4.002 0 013.874 3H24v2H11.874a4.002 4.002 0 01-7.748 0H0V6h4.126C4.57 4.275 6.136 3 8 3zm0 2a2 2 0 100 4 2 2 0 000-4z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/print-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 PrintIcon({ 'aria-label': ariaLabel = 'Print', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M20,18 L20,24 L4,24 L4,18 L0,18 L0,9 C-2.02906125e-16,7.34314575 1.34314575,6 3,6 L21,6 C22.6568542,6 24,7.34314575 24,9 L24,18 L20,18 Z M6,14 L18,14 L18,22 L6,22 L6,14 Z M20.5,11 C19.6715729,11 19,10.3284271 19,9.5 C19,8.67157288 19.6715729,8 20.5,8 C21.3284271,8 22,8.67157288 22,9.5 C22,10.3284271 21.3284271,11 20.5,11 Z M4,0 L20,0 L20,4 L4,4 L4,0 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/progress-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 ProgressIcon({ 'aria-label': ariaLabel = 'Progress', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M12,24 C5.37225,24 0,18.627 0,12 C0,5.373 5.37225,0 12,0 C18.62775,0 24,5.373 24,12 C24,18.627 18.62775,24 12,24 Z M2,12 C2,17.5228571 6.47714286,22 12,22 C17.5228571,22 22,17.5228571 22,12 C22,6.47714286 17.5228571,2 12,2 C6.47714286,2 2,6.47714286 2,12 Z M5.26975551,16.3265857 L5.26975551,16.3265857 L12,12 L12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 C9.17578388,20 6.69337779,18.5365373 5.26975551,16.3265857 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/quick-balance-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 QuickBalanceIcon({
+  'aria-label': ariaLabel = 'Quick Balance',
+  copyrightYear = '2020',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M14.235,15.8515 L19.42425,8.575 L12.17775,13.7665 C11.54925,13.717 10.893,13.93075 10.4085,14.40925 C9.52425,15.2815 9.5355,16.7065 10.4085,17.59075 C11.2815,18.47575 12.7065,18.46375 13.59075,17.59075 C14.0745,17.113 14.277,16.48075 14.235,15.8515 L14.235,15.8515 Z M12,7 C7.0365,7 3,11.03725 3,16 C3,17.33875 3.3015,18.60625 3.82875,19.75 L7.323,19.75 C6.49725,18.72175 6,17.41825 6,16 C6,12.69175 8.691,10 12,10 C12.7935,10 13.551,10.15825 14.2455,10.44025 L16.95825,8.49625 C15.53475,7.55275 13.8315,7 12,7 L12,7 Z M19.5045,11.04475 L17.5635,13.7665 C17.8425,14.45725 18,15.21025 18,16 C18,17.41825 17.502,18.72175 16.67625,19.75 L20.1705,19.75 C20.69775,18.60625 21,17.33875 21,16 C21,14.16925 20.44725,12.46675 19.5045,11.04475 L19.5045,11.04475 Z M1.6185,22 C0.59475,20.233 0,18.1885 0,16 C0,9.37225 5.37225,4 12,4 C18.627,4 24,9.37225 24,16 C24,18.1885 23.4045,20.233 22.38075,22 L1.6185,22 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/receipt-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 ReceiptIcon({ 'aria-label': ariaLabel = 'Receipt', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M12,0 L13.25,1.5 L14.5,0 L15.75,1.5 L17,0 L18.25,1.5 L19.5,0 L20.75,1.5 L22,0 L22,24 L20.75,22.5 L19.5,24 L18.25,22.5 L17,24 L15.75,22.5 L14.5,24 L13.25,22.5 L12,24 L10.75,22.5 L9.5,24 L8.25,22.5 L7,24 L5.75,22.5 L4.5,24 L3.25,22.5 L2,24 L2,0 L3.25,1.5 L4.5,0 L5.75,1.5 L7,0 L8.25,1.5 L9.5,0 L10.75,1.5 L12,0 Z M6,12 L18,12 L18,10 L6,10 L6,12 Z M6,16 L18,16 L18,14 L6,14 L6,16 Z M6,6 L6,8 L18,8 L18,6 L6,6 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/refresh-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 RefreshIcon({ 'aria-label': ariaLabel = 'Refresh', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M21.5,12 L21.5,12 L24,12 L20.5,17 L17,12 L19.5,12 C19.5,7.85786438 16.1421356,4.5 12,4.5 C9.65136508,4.5 7.5548742,5.57955693 6.17967925,7.26951887 L5.02991296,5.54486944 C6.76508468,3.6721649 9.24565545,2.5 12,2.5 C17.2467051,2.5 21.5,6.75329488 21.5,12 Z M4.5,12 C4.5,16.1421356 7.85786438,19.5 12,19.5 C14.3486349,19.5 16.4451258,18.4204431 17.8203208,16.7304811 L18.970087,18.4551306 C17.2349153,20.3278351 14.7543445,21.5 12,21.5 C6.75329488,21.5 2.5,17.2467051 2.5,12 L0,12 L3.5,7 L7,12 L4.5,12 L4.5,12 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/remove-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 RemoveCircleIcon({ 'aria-label': ariaLabel = 'Remove', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M24,12 C24,18.627 18.62775,24 12,24 C5.37225,24 0,18.627 0,12 C0,5.373 5.37225,0 12,0 C18.62775,0 24,5.373 24,12 Z M12,2 C6.47714286,2 2,6.47714286 2,12 C2,17.5228571 6.47714286,22 12,22 C17.5228571,22 22,17.5228571 22,12 C22,6.47714286 17.5228571,2 12,2 Z M6,11 L18,11 L18,13 L6,13 L6,11 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/remove-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 RemoveIcon({ 'aria-label': ariaLabel = 'Remove', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <polygon fill="currentColor" fillRule="evenodd" points="4 11 4 13 20 13 20 11" />
+    </Icon>
+  );
+}

package/src/components/icon/components/rss-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 RssIcon({ 'aria-label': ariaLabel = 'Rss', 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 M8.26259063,17.8600823 C8.26259063,19.0342936 7.30942583,19.9819714 6.12972761,19.9819714 C4.95473251,19.9819714 4,19.0342936 4,17.8600823 C4,16.691358 4.95473251,15.7334901 6.12972761,15.7334901 C7.30942583,15.7334901 8.26259063,16.691358 8.26259063,17.8600823 Z M11.4826573,20 C11.4826573,17.9956888 10.7027239,16.1097394 9.29022144,14.6980208 C7.87615128,13.2831668 6.35155791,12.5032334 4,12.5032334 L4,9.43601803 C9.48696845,9.43601803 14.5631981,14.1744072 14.5631981,20 L11.4826573,20 Z M16.9241623,20 L16.9210268,20 C16.9210268,12.8700764 11.0546737,7.06799922 4,7.06799922 L4,4 C12.622379,4 20.0007839,11.1800901 20.0007839,20 L16.9241623,20 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/sd-storage-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 SdStorageIcon({ 'aria-label': ariaLabel = 'Sd Storage', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M18,0 C19.1,0 20,0.9 20,2 L20,22 C20,23.1 19.1,24 18,24 L4,24 C2.9,24 2,23.1 2,22 L2.02,6 L8,0 L18,0 Z M10,8 L10,2 L8,2 L8,8 L10,8 Z M14,8 L14,2 L12,2 L12,8 L14,8 Z M18,8 L18,2 L16,2 L16,8 L18,8 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/search-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 SearchIcon({ 'aria-label': ariaLabel = 'Search', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M2,9 C2,5.13425 5.13425,2 9,2 C12.86575,2 16,5.13425 16,9 C16,12.86575 12.86575,16 9,16 C5.13425,16 2,12.86575 2,9 M22.59075,20.15925 L16.46325,14.03175 C17.433,12.5955 18,10.86375 18,9 C18,4.02975 13.97025,0 9,0 C4.02975,0 0,4.02975 0,9 C0,13.97025 4.02975,18 9,18 C10.4715,18 11.856,17.64 13.08225,17.01375 L19.40925,23.34075 C19.84875,23.78025 20.424,24 21,24 C21.576,24 22.15125,23.78025 22.59075,23.34075 C23.46975,22.4625 23.46975,21.0375 22.59075,20.15925"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/security-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 SecurityIcon({ 'aria-label': ariaLabel = 'Security', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M12,0 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,0 Z M4.04577037,12 L4.04577037,12 L12,12 L12,21.9311004 C16.274414,20.6811566 19.534648,16.5867485 19.9542296,12 L12,12 L12,2.19317122 L4,5.79317122 L4,11 C4,11.3353086 4.01548572,11.6689368 4.04577037,12 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/service-bell-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 ServiceBellIcon({
+  'aria-label': ariaLabel = 'Service Bell',
+  copyrightYear = '2020',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M1,18 C1,11.9248678 5.92486775,7 12,7 C18.0751322,7 23,11.9248678 23,18 L1,18 Z M9,2 L15,2 L15,4 L9,4 L9,2 Z M0,20 L24,20 L24,22 L0,22 L0,20 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/settings-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 SettingsIcon({ 'aria-label': ariaLabel = 'Settings', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M24,14.25225 L20.5515,14.826 C20.41275,15.2475 20.24325,15.65475 20.04525,16.0455 L22.0785,18.89175 L18.8925,22.077 L16.04175,20.04075 C15.6525,20.2365 15.2475,20.4045 14.82825,20.54325 L14.25225,24 L9.74775,24 L9.17175,20.544 C8.7525,20.40525 8.3475,20.2365 7.9575,20.0415 L5.1075,22.07775 L1.9215,18.89175 L3.954,16.04625 C3.7575,15.6555 3.58725,15.2475 3.44775,14.82675 L0,14.25225 L0,9.74775 L3.4395,9.17325 C3.57825,8.74875 3.74925,8.33775 3.948,7.94325 L1.9215,5.10675 L5.1075,1.9215 L7.93875,3.94425 C8.33475,3.744 8.748,3.57225 9.1755,3.43125 L9.74775,0 L14.25225,0 L14.82375,3.432 C15.25125,3.573 15.6645,3.74475 16.0605,3.945 L18.89175,1.92225 L22.07775,5.10825 L20.0505,7.944 C20.25,8.3385 20.42025,8.7495 20.55975,9.17475 L24,9.74775 L24,14.25225 Z M7,12 C7,14.7614286 9.23857143,17 12,17 C14.7614286,17 17,14.7614286 17,12 C17,9.23857143 14.7614286,7 12,7 C9.23857143,7 7,9.23857143 7,12 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/share-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 ShareIcon({ 'aria-label': ariaLabel = 'Share', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M19.0722892,16.9638554 C18.1566265,16.9638554 17.3373494,17.3253012 16.7108434,17.8915663 L8.12048193,12.8915663 C8.18072289,12.6144578 8.22891566,12.3373494 8.22891566,12.0481928 C8.22891566,11.7590361 8.18072289,11.4819277 8.12048193,11.2048193 L16.6144578,6.25301205 C17.2650602,6.85542169 18.1204819,7.22891566 19.0722892,7.22891566 C21.0722892,7.22891566 22.686747,5.61445783 22.686747,3.61445783 C22.686747,1.61445783 21.0722892,0 19.0722892,0 C17.0722892,0 15.4578313,1.61445783 15.4578313,3.61445783 C15.4578313,3.90361446 15.5060241,4.18072289 15.5662651,4.45783133 L7.07228916,9.40963855 C6.42168675,8.80722892 5.56626506,8.43373494 4.61445783,8.43373494 C2.61445783,8.43373494 1,10.0481928 1,12.0481928 C1,14.0481928 2.61445783,15.6626506 4.61445783,15.6626506 C5.56626506,15.6626506 6.42168675,15.2891566 7.07228916,14.686747 L15.6506024,19.6987952 C15.5903614,19.9518072 15.5542169,20.2168675 15.5542169,20.4819277 C15.5542169,22.4216867 17.1325301,24 19.0722892,24 C21.0120482,24 22.5903614,22.4216867 22.5903614,20.4819277 C22.5903614,18.5421687 21.0120482,16.9638554 19.0722892,16.9638554 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/share-ios-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 ShareIosIcon({ 'aria-label': ariaLabel = 'Share', copyrightYear = '2021', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M17 5l-1.42 1.42-2.59-2.59L13 16h-2l.01-12.17-2.59 2.59L7 5l5-5 5 5zm5 5v12c0 1.1-.9 2-2 2H4a2 2 0 01-2-2V10c0-1.11.89-2 2-2h4v2H4v12h16V10h-4V8h4a2 2 0 012 2z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/shop-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 ShopIcon({ 'aria-label': ariaLabel = 'Shop', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M4,2 L20,2 L20,0 L4,0 L4,2 Z M4,4 L0,11.00075 L0,14.00075 L2,14.00075 L2,24 L14,24 L14,14.00075 L20,14.00075 L20,24 L22,24 L22,14.00075 L24,14.00075 L24,11.00075 L20,4 L4,4 Z M4,20 L12,20 L12,14 L4,14 L4,20 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/sim-card-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 SimCardIcon({ 'aria-label': ariaLabel = 'Sim Card', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M18,0 C19.1,0 20,0.9 20,2 L20,22 C20,23.1 19.1,24 18,24 L4,24 C2.9,24 2,23.1 2,22 L2,7 L8,0 L18,0 Z M8,14 L8,8 L6,8 L6,14 L8,14 Z M12,20 L12,12 L10,12 L10,20 L12,20 Z M12,10 L12,8 L10,8 L10,10 L12,10 Z M16,20 L16,14 L14,14 L14,20 L16,20 Z M8,20 L8,16 L6,16 L6,20 L8,20 Z M16,12 L16,8 L14,8 L14,12 L16,12 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/slack-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 SlackIcon({ 'aria-label': ariaLabel = 'Slack', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M22.5 0A1.5 1.5 0 0124 1.5v21a1.5 1.5 0 01-1.5 1.5h-21A1.5 1.5 0 010 22.5v-21A1.5 1.5 0 011.5 0h21zM9.767 12.61c-.894 0-1.625.73-1.625 1.623V18.3c0 .894.73 1.624 1.625 1.624.894 0 1.624-.73 1.624-1.624v-4.067c0-.894-.73-1.624-1.624-1.624zm4.466 4.066H12.61V18.3c0 .894.73 1.624 1.624 1.624.894 0 1.625-.73 1.625-1.624 0-.894-.73-1.624-1.625-1.624zm-6.909-4.067H5.7c-.894 0-1.624.73-1.624 1.624 0 .894.73 1.625 1.624 1.625.894 0 1.624-.73 1.624-1.625V12.61zm10.976 0h-4.067c-.894 0-1.624.73-1.624 1.624 0 .894.73 1.625 1.624 1.625H18.3c.894 0 1.624-.73 1.624-1.625 0-.894-.73-1.624-1.624-1.624zm-4.067-8.533c-.894 0-1.624.73-1.624 1.624v4.067c0 .894.73 1.624 1.624 1.624.894 0 1.625-.73 1.625-1.624V5.7c0-.894-.73-1.624-1.625-1.624zM18.3 8.142c-.894 0-1.624.73-1.624 1.625v1.624H18.3c.894 0 1.624-.73 1.624-1.624 0-.894-.73-1.625-1.624-1.625zm-8.533 0H5.7c-.894 0-1.624.73-1.624 1.625 0 .894.73 1.624 1.624 1.624h4.067c.894 0 1.624-.73 1.624-1.624 0-.894-.73-1.625-1.624-1.625zm0-4.066c-.894 0-1.625.73-1.625 1.624 0 .894.73 1.624 1.625 1.624h1.624V5.7c0-.894-.73-1.624-1.624-1.624z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/sms-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 SmsIcon({ 'aria-label': ariaLabel = 'Sms', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L22,0 C23.1045695,-2.02906125e-16 24,0.8954305 24,2 L24,16 C24,17.1045695 23.1045695,18 22,18 L6,18 L0,24 L0,2 Z M6,11 C7.1045695,11 8,10.1045695 8,9 C8,7.8954305 7.1045695,7 6,7 C4.8954305,7 4,7.8954305 4,9 C4,10.1045695 4.8954305,11 6,11 Z M12,11 C13.1045695,11 14,10.1045695 14,9 C14,7.8954305 13.1045695,7 12,7 C10.8954305,7 10,7.8954305 10,9 C10,10.1045695 10.8954305,11 12,11 Z M18,11 C19.1045695,11 20,10.1045695 20,9 C20,7.8954305 19.1045695,7 18,7 C16.8954305,7 16,7.8954305 16,9 C16,10.1045695 16.8954305,11 18,11 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/star-empty-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 StarEmptyIcon({ 'aria-label': ariaLabel = 'Star Empty', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M12,0 L8.99925,9 L0,9 L7.5,14.25 L4.5,23.25 L12,17.24925 L19.5,23.25 L16.49925,14.25 L24,9 L15,9 L12,0 Z M8.92275,14.724 L9.276,13.66275 L8.36025,13.02075 L4.75875,10.49925 L8.99925,10.49925 L10.08075,10.49925 L10.4235,9.474 L12,4.743 L13.5765,9.474 L13.91925,10.49925 L15,10.49925 L19.24125,10.49925 L15.63975,13.02075 L14.72325,13.66275 L15.0765,14.724 L16.47075,18.90525 L12.93675,16.0785 L12,15.32925 L11.0625,16.0785 L7.52925,18.90525 L8.92275,14.724 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/star-half-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 StarHalfIcon({ 'aria-label': ariaLabel = 'Star Half', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M12,0 L9,9 L0,9 L7.5,14.25 L4.5,23.25 L12,17.24925 L19.5,23.25 L16.49925,14.25 L24,9 L15,9 L12,0 Z M12.93675,16.0785 L12,15.32925 L12,4.743 L13.5765,9.474 L13.91925,10.49925 L15,10.49925 L19.24125,10.49925 L15.63975,13.02075 L14.72325,13.66275 L15.0765,14.724 L16.47075,18.90525 L12.93675,16.0785 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/star-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 StarIcon({ 'aria-label': ariaLabel = 'Star', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <polygon
+        fill="currentColor"
+        fillRule="evenodd"
+        points="12 0 9 9 0 9 7.5 14.25 4.5 23.25 12 17.249 19.5 23.25 16.499 14.25 24 9 15 9"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/stopwatch-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 StopwatchIcon({ 'aria-label': ariaLabel = 'Stopwatch', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M18.6181506,6.50316976 L20.1213203,5 L21.5355339,6.41421356 L19.9788158,7.9709317 C21.2474477,9.64720474 22,11.7357184 22,14 C22,19.5228475 17.5228475,24 12,24 C6.4771525,24 2,19.5228475 2,14 C2,8.4771525 6.4771525,4 12,4 C14.5378379,4 16.854872,4.94537379 18.6181506,6.50316976 L18.6181506,6.50316976 Z M12,22 C16.418278,22 20,18.418278 20,14 C20,9.581722 16.418278,6 12,6 C7.581722,6 4,9.581722 4,14 C4,18.418278 7.581722,22 12,22 Z M8,0 L16,0 L16,2 L8,2 L8,0 Z M11,8 L13,8 L13,16 L11,16 L11,8 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/success-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 SuccessIcon({ 'aria-label': ariaLabel = 'Success', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="nonzero"
+        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/super-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 SuperIcon({ 'aria-label': ariaLabel = 'Super', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M3.53466187,12.00015 L2.57142857,12.00015 C1.38987861,12.00015 1,12.75 1,13.5 C1,19.293 5.93758571,24 12.0056571,24 C18.0745143,24 23,19.2615064 23,13.5 C23,12.75 22.6083687,12.00015 21.4285714,12.00015 L20.4653381,12.00015 C20.4882799,11.6707392 20.5,11.3371409 20.5,11 C20.5,4.92486775 16.0009665,1.8189894e-12 12,0 C7.99903353,-1.81943589e-12 3.5,4.92486775 3.5,11 C3.5,11.3371409 3.51172012,11.6707392 3.53466187,12.00015 L3.53466187,12.00015 Z M5.53995504,12 C5.51357894,11.6722891 5.5,11.3386771 5.5,11 C5.5,6.24348282 8.96383884,2 12,2 C15.0361612,2 18.5,6.24348282 18.5,11 C18.5,11.3386771 18.4864211,11.6722891 18.460045,12 L5.53995504,12 L5.53995504,12 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/switch-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 SwitchIcon({ 'aria-label': ariaLabel = 'Switch', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M8,0 L2,5.985 L6,5.985 L6,14 L10,14 L10,5.985 L14,5.985 L8,0 Z M14,10 L14,18.015 L10,18.015 L16,24 L22,18.015 L18,18.015 L18,10 L14,10 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/tablet-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 TabletIcon({ 'aria-label': ariaLabel = 'Tablet', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M4,1.77635684e-15 L20,1.77635684e-15 C21.1045695,1.57345071e-15 22,0.8954305 22,2 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,1.97926296e-15 4,1.77635684e-15 L4,1.77635684e-15 Z M4,2 L4,18 L20,18 L20,2 L4,2 Z M12,22.5 C12.8284271,22.5 13.5,21.8284271 13.5,21 C13.5,20.1715729 12.8284271,19.5 12,19.5 C11.1715729,19.5 10.5,20.1715729 10.5,21 C10.5,21.8284271 11.1715729,22.5 12,22.5 Z"
+      />
+    </Icon>
+  );
+}