Merge pull request #25 from bobbychan/feat/icons

feat: add some icons

.changeset/little-starfishes-bow.md

@@ -0,0 +1,7 @@
+---
+'@alice-ui/react-utils': patch
+'@alice-ui/icons': patch
+'@alice-ui/react': patch
+---
+
+add/remove some icons

packages/icons/src/chevron-left.tsx

@@ -1,6 +1,6 @@
 import { IconProps } from './types';
 
-export const ChevronIcon = (props: IconProps) => (
+export const ChevronLeftIcon = ({ strokeWidth = 1.5, ...props }: IconProps) => (
   <svg
     aria-hidden="true"
     fill="none"
@@ -9,14 +9,12 @@ export const ChevronIcon = (props: IconProps) => (
     viewBox="0 0 24 24"
     width="1em"
     height="1em"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={strokeWidth}
     {...props}
   >
-    <path
-      d="M15.5 19l-7-7 7-7"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
+    <path d="m15 18-6-6 6-6" />
   </svg>
 );

packages/icons/src/chevron-right.tsx

@@ -1,6 +1,6 @@
 import { IconProps } from './types';
 
-export const ChevronRightIcon = (props: IconProps) => (
+export const ChevronRightIcon = ({ strokeWidth = 1.5, ...props }: IconProps) => (
   <svg
     aria-hidden="true"
     fill="none"
@@ -9,7 +9,7 @@ export const ChevronRightIcon = (props: IconProps) => (
     stroke="currentColor"
     strokeLinecap="round"
     strokeLinejoin="round"
-    strokeWidth="1.5"
+    strokeWidth={strokeWidth}
     viewBox="0 0 24 24"
     width="1em"
     height="1em"

packages/icons/src/clock.tsx

@@ -0,0 +1,21 @@
+import { IconProps } from './types';
+
+export const ClockIcon = ({ strokeWidth = 1.5, ...props }: IconProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    role="presentation"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={strokeWidth}
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <polyline points="12 6 12 12 16 14" />
+  </svg>
+);

packages/icons/src/cloud-arrow-up-filled.tsx

@@ -0,0 +1,21 @@
+import { IconProps } from './types';
+
+export const CloudArrowUpFilledIcon = (props: IconProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    role="presentation"
+    viewBox="0 0 24 24"
+    height="1em"
+    width="1em"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M10.5 3.75a6 6 0 00-5.98 6.496A5.25 5.25 0 006.75 20.25H18a4.5 4.5 0 002.206-8.423 3.75 3.75 0 00-4.133-4.303A6.001 6.001 0 0010.5 3.75zm2.03 5.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l1.72-1.72v4.94a.75.75 0 001.5 0v-4.94l1.72 1.72a.75.75 0 101.06-1.06l-3-3z"
+      clipRule="evenodd"
+      fill="currentColor"
+    />
+  </svg>
+);

packages/icons/src/cloud-arrow-up.tsx

@@ -0,0 +1,22 @@
+import { IconProps } from './types';
+
+export const CloudArrowUpIcon = (props: IconProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    role="presentation"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="currentColor"
+    height="1em"
+    width="1em"
+    {...props}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"
+    />
+  </svg>
+);

packages/icons/src/copy.tsx

@@ -0,0 +1,19 @@
+import { IconProps } from './types';
+
+export const CopyIcon = (props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+    <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+  </svg>
+);

packages/icons/src/home.tsx

@@ -0,0 +1,16 @@
+import { IconProps } from './types';
+
+export const HomeIcon = (props: IconProps) => (
+  <svg
+    fill="currentColor"
+    viewBox="0 0 1024 1024"
+    strokeWidth={1.5}
+    aria-hidden="true"
+    focusable="false"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M947.2 416L576 102.4c-35.2-30.4-88-30.4-123.2 0L76.8 416c-8 6.4-12.8 14.4-12.8 25.6 0 17.6 14.4 32 32 32 8 0 16-3.2 20.8-8L128 456v356.8c0 72 54.4 131.2 123.2 131.2h521.6C840 944 896 884.8 896 812.8V456l9.6 8c6.4 4.8 12.8 8 22.4 8 17.6 0 32-14.4 32-32 0-8-4.8-17.6-12.8-24zM448 880V656c0-17.6 14.4-32 32-32h64c17.6 0 32 14.4 32 32v224H448z m384-67.2c0 36.8-27.2 67.2-60.8 67.2H640V656c0-52.8-43.2-96-96-96h-64c-52.8 0-96 43.2-96 96v224H252.8c-33.6 0-60.8-30.4-60.8-67.2V403.2L492.8 152c11.2-9.6 28.8-9.6 41.6 0L832 401.6v411.2z"></path>
+  </svg>
+);

packages/icons/src/index.ts

@@ -4,15 +4,28 @@ export * from './chevron-down';
 export * from './chevron-left';
 export * from './chevron-right';
 export * from './chevron-up';
-export * from './close';
-export * from './close-circle';
-export * from './close-circle-filled';
-export * from './close-filled';
+export * from './clock';
+export * from './cloud-arrow-up';
+export * from './cloud-arrow-up-filled';
+export * from './copy';
 export * from './exclamation-circle';
 export * from './exclamation-circle-filled';
+export * from './home';
 export * from './info';
 export * from './info-filled';
+export * from './map-pin';
+export * from './minus';
 export * from './moon';
 export * from './moon-filled';
+export * from './order-list';
+export * from './pencil-line';
+export * from './plus';
+export * from './plus-circle';
+export * from './plus-circle-filled';
 export * from './sun';
 export * from './sun-filled';
+export * from './trash';
+export * from './user';
+export * from './x-circle';
+export * from './x-circle-filled';
+export * from './x-mark';

packages/icons/src/map-pin.tsx

@@ -0,0 +1,18 @@
+import { IconProps } from './types';
+
+export const MapPinIcon = (props: IconProps) => (
+  <svg
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    aria-hidden="true"
+    focusable="false"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
+    <circle cx="12" cy="10" r="3" />
+  </svg>
+);

packages/icons/src/close.tsx → packages/icons/src/minus.tsx

@@ -1,20 +1,20 @@
 import { IconProps } from './types';
 
-export const CloseIcon = (props: IconProps) => (
+export const MinusIcon = (props: IconProps) => (
   <svg
-    viewBox="0 0 24 24"
+    aria-hidden="true"
     fill="none"
+    focusable="false"
     role="presentation"
     stroke="currentColor"
     strokeLinecap="round"
     strokeLinejoin="round"
     strokeWidth={2}
-    aria-hidden="true"
-    focusable="false"
+    viewBox="0 0 24 24"
     width="1em"
     height="1em"
     {...props}
   >
-    <path d="M18 6L6 18M6 6l12 12" />
+    <path d="M5 12h14" />
   </svg>
 );

packages/icons/src/order-list.tsx

@@ -0,0 +1,17 @@
+import { IconProps } from './types';
+
+export const OrderListIcon = (props: IconProps) => (
+  <svg
+    fill="currentColor"
+    viewBox="0 0 1024 1024"
+    strokeWidth={1.5}
+    aria-hidden="true"
+    focusable="false"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M496 704H368c-17.6 0-32 14.4-32 32s14.4 32 32 32h128c17.6 0 32-14.4 32-32s-14.4-32-32-32z m160-160H368c-17.6 0-32 14.4-32 32s14.4 32 32 32h288c17.6 0 32-14.4 32-32s-14.4-32-32-32z m0-160H368c-17.6 0-32 14.4-32 32s14.4 32 32 32h288c17.6 0 32-14.4 32-32s-14.4-32-32-32z"></path>
+    <path d="M720 144h-22.4c-12.8-36.8-48-64-89.6-64H416c-41.6 0-76.8 27.2-89.6 64H304c-88 0-160 72-160 160v480c0 88 72 160 160 160h416c88 0 160-72 160-160V304c0-88-72-160-160-160z m-304 0h192c17.6 0 32 14.4 32 32s-14.4 32-32 32H416c-17.6 0-32-14.4-32-32s14.4-32 32-32z m400 640c0 52.8-43.2 96-96 96H304c-52.8 0-96-43.2-96-96V304c0-52.8 43.2-96 96-96h22.4c12.8 36.8 48 64 89.6 64h192c41.6 0 76.8-27.2 89.6-64H720c52.8 0 96 43.2 96 96v480z"></path>
+  </svg>
+);

packages/icons/src/pencil-line.tsx

@@ -0,0 +1,22 @@
+import { IconProps } from './types';
+
+export const PencilLineIcon = ({ strokeWidth = 1.5, ...props }: IconProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    role="presentation"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={strokeWidth}
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M12 20h9" />
+    <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
+    <path d="m15 5 3 3" />
+  </svg>
+);

packages/icons/src/plus-circle-filled.tsx

@@ -0,0 +1,19 @@
+import { IconProps } from './types';
+
+export const PlusCircleFilledIcon = (props: IconProps) => (
+  <svg
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    focusable="false"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

packages/icons/src/plus-circle.tsx

@@ -0,0 +1,21 @@
+import { IconProps } from './types';
+
+export const PlusCircleIcon = (props: IconProps) => (
+  <svg
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    aria-hidden="true"
+    focusable="false"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+    />
+  </svg>
+);

packages/icons/src/plus.tsx

@@ -0,0 +1,21 @@
+import { IconProps } from './types';
+
+export const PlusIcon = (props: IconProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    role="presentation"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M5 12h14" />
+    <path d="M12 5v14" />
+  </svg>
+);

packages/icons/src/trash.tsx

@@ -0,0 +1,21 @@
+import { IconProps } from './types';
+
+export const TrashIcon = (props: IconProps) => (
+  <svg
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    aria-hidden="true"
+    focusable="false"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M3 6h18" />
+    <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+    <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+    <line x1="10" x2="10" y1="11" y2="17" />
+    <line x1="14" x2="14" y1="11" y2="17" />
+  </svg>
+);

packages/icons/src/user.tsx

@@ -0,0 +1,16 @@
+import { IconProps } from './types';
+
+export const UserIcon = (props: IconProps) => (
+  <svg
+    fill="currentColor"
+    viewBox="0 0 1024 1024"
+    strokeWidth={1.5}
+    aria-hidden="true"
+    focusable="false"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M512 464c88 0 160-72 160-160s-72-160-160-160-160 72-160 160 72 160 160 160z m-139.2 16C321.6 438.4 288 376 288 304c0-123.2 100.8-224 224-224s224 100.8 224 224c0 70.4-33.6 134.4-84.8 176C811.2 526.4 928 673.6 928 848c0 52.8-43.2 96-96 96H192c-52.8 0-96-43.2-96-96 0-174.4 116.8-321.6 276.8-368zM832 880c17.6 0 32-14.4 32-32 0-176-144-320-320-320h-64c-176 0-320 144-320 320 0 17.6 14.4 32 32 32h640z"></path>
+  </svg>
+);