Add StatusFailIcon, StatusPassIcon, StatusWarnIcon

src/iconList.tsx

@@ -36,7 +36,7 @@ export const iconList = [
       'StackedIcon',
       'SunIcon',
       'MoonIcon',
-    ],
+    ]
   },
   {
     name: 'Documents',
@@ -57,7 +57,7 @@ export const iconList = [
       'DocListIcon',
       'DragIcon',
       'MenuIcon',
-    ],
+    ]
   },
   {
     name: 'Editing',
@@ -70,7 +70,7 @@ export const iconList = [
       'ListUnorderedIcon',
       'ParagraphIcon',
       'MarkdownIcon',
-    ],
+    ]
   },
   {
     name: 'Git',
@@ -80,7 +80,7 @@ export const iconList = [
       'BranchIcon',
       'PullRequestIcon',
       'MergeIcon',
-    ],
+    ]
   },
   {
     name: 'OS',
@@ -90,7 +90,7 @@ export const iconList = [
       'UbuntuIcon',
       'WindowsIcon',
       'ChromeIcon',
-    ],
+    ]
   },
   {
     name: 'Logos',
@@ -115,7 +115,7 @@ export const iconList = [
       'VSCodeIcon',
       'LinkedinIcon',
       'XIcon',
-    ],
+    ]
   },
   {
     name: 'Devices',
@@ -136,7 +136,7 @@ export const iconList = [
       'StructureIcon',
       'BoxIcon',
       'PowerIcon',
-    ],
+    ]
   },
   {
     name: 'CRUD',
@@ -220,7 +220,10 @@ export const iconList = [
       'CloudHollowIcon',
       'CloudIcon',
       'StickerIcon',
-    ],
+      'StatusFailIcon',
+      'StatusWarnIcon',
+      'StatusPassIcon',
+    ]
   },
   {
     name: 'Wayfinding',
@@ -269,7 +272,7 @@ export const iconList = [
       'HomeIcon',
       'AdminIcon',
       'DirectionIcon',
-    ],
+    ]
   },
   {
     name: 'People',
@@ -284,6 +287,6 @@ export const iconList = [
       'FaceSadIcon',
       'AccessibilityIcon',
       'AccessibilityAltIcon',
-    ],
+    ]
   },
 ];

src/icons/StatusFailIcon.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { StatusFailIcon } from './StatusFailIcon';
+
+const meta: Meta<typeof StatusFailIcon> = {
+  component: StatusFailIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof StatusFailIcon>;
+
+export const Default: Story = { args: { size: 100 } };

src/icons/StatusFailIcon.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+
+export const StatusFailIcon = /* @__PURE__ */ React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = 'currentColor', size = 14, ...props }, forwardedRef) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={forwardedRef}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7 4a3 3 0 100 6 3 3 0 000-6zM3 7a4 4 0 118 0 4 4 0 01-8 0z"
+        fill={color}
+      />
+    </svg>
+  );
+});

src/icons/StatusPassIcon.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { StatusPassIcon } from './StatusPassIcon';
+
+const meta: Meta<typeof StatusPassIcon> = {
+  component: StatusPassIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof StatusPassIcon>;
+
+export const Default: Story = { args: { size: 100 } };

src/icons/StatusPassIcon.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+
+export const StatusPassIcon = /* @__PURE__ */ React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = 'currentColor', size = 14, ...props }, forwardedRef) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={forwardedRef}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.854 4.146a.5.5 0 010 .708l-5 5a.5.5 0 01-.708 0l-2-2a.5.5 0 11.708-.708L5.5 8.793l4.646-4.647a.5.5 0 01.708 0z"
+        fill={color}
+      />
+    </svg>
+  );
+});

src/icons/StatusWarnIcon.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { StatusWarnIcon } from './StatusWarnIcon';
+
+const meta: Meta<typeof StatusWarnIcon> = {
+  component: StatusWarnIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof StatusWarnIcon>;
+
+export const Default: Story = { args: { size: 100 } };

src/icons/StatusWarnIcon.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+
+export const StatusWarnIcon = /* @__PURE__ */ React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = 'currentColor', size = 14, ...props }, forwardedRef) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={forwardedRef}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.206 3.044a.498.498 0 01.23.212l3.492 5.985a.494.494 0 01.006.507.497.497 0 01-.443.252H3.51a.499.499 0 01-.437-.76l3.492-5.984a.497.497 0 01.642-.212zM7 4.492L4.37 9h5.26L7 4.492z"
+        fill={color}
+      />
+    </svg>
+  );
+});

src/index.ts

@@ -178,6 +178,9 @@ export { FlagIcon } from './icons/FlagIcon';
 export { CloudHollowIcon } from './icons/CloudHollowIcon';
 export { CloudIcon } from './icons/CloudIcon';
 export { StickerIcon } from './icons/StickerIcon';
+export { StatusFailIcon } from './icons/StatusFailIcon';
+export { StatusWarnIcon } from './icons/StatusWarnIcon';
+export { StatusPassIcon } from './icons/StatusPassIcon';
 export { ChevronUpIcon } from './icons/ChevronUpIcon';
 export { ChevronDownIcon } from './icons/ChevronDownIcon';
 export { ChevronLeftIcon } from './icons/ChevronLeftIcon';