Merge pull request #51 from plezanje-net/more-icons

Add some icons and update icons sandbox.
plezanje-net · Nov 2, 2024 · 198acdf · 198acdf
2 parents d30fceb + fe98805
commit 198acdf
Show file tree

Hide file tree

Showing 10 changed files with 211 additions and 11 deletions.
diff --git a/src/app/sandbox/icons/page.tsx b/src/app/sandbox/icons/page.tsx
@@ -1,4 +1,6 @@
+import { IconSize } from "@/components/ui/icons/icon-size";
 import { readdirSync } from "fs";
+import { readFileSync } from "fs";
 import { lazy } from "react";
 
 function IconsPage() {
@@ -8,29 +10,92 @@ function IconsPage() {
   }
 
   const iconComponents = files
-    .filter((file) => file !== "icon.tsx" && file != "icon-size.tsx")
+    .filter((file) => file != "icon-size.tsx")
     .map((file) => ({
       component: lazy(
         () => import(`../../../components/ui/icons/${file.replace(".tsx", "")}`)
       ),
       name: file.replace(".tsx", ""),
+      sizes: {
+        small: readFileSync(`./src/components/ui/icons/${file}`)
+          .toString()
+          .includes("IconSize.small"),
+        regular: readFileSync(`./src/components/ui/icons/${file}`)
+          .toString()
+          .includes("IconSize.regular"),
+        large: readFileSync(`./src/components/ui/icons/${file}`)
+          .toString()
+          .includes("IconSize.large"),
+      },
     }));
 
   return (
     <div className="m-8">
       <h3>Icons list</h3>
 
-      <div className="mt-14 flex flex-wrap">
+      <div className="mt-14 grid grid-cols-3 gap-4">
         {iconComponents.map((Icon, index) => (
-          <div
-            key={index}
-            className="flex w-32 flex-col items-center pb-6 text-center"
-          >
-            <div className="inline-block">
-              <Icon.component />
-            </div>
-            <div>{Icon.name}</div>
-          </div>
+          <>
+            {!Icon.sizes.small && !Icon.sizes.regular && !Icon.sizes.large ? (
+              <>
+                <div></div>
+                <div
+                  key={index}
+                  className="flex w-32 flex-col items-center pb-6 text-center"
+                >
+                  <div className="inline-block">
+                    <Icon.component />
+                  </div>
+                  <div>{Icon.name}</div>
+                </div>
+                <div></div>
+              </>
+            ) : (
+              <>
+                {Icon.sizes.small ? (
+                  <div
+                    key={index}
+                    className="flex w-32 flex-col items-center pb-6 text-center"
+                  >
+                    <div className="inline-block">
+                      <Icon.component size={IconSize.small} />
+                    </div>
+                    <div>{Icon.name}, small</div>
+                  </div>
+                ) : (
+                  <div></div>
+                )}
+
+                {Icon.sizes.regular ? (
+                  <div
+                    key={index}
+                    className="flex w-32 flex-col items-center pb-6 text-center"
+                  >
+                    <div className="inline-block">
+                      <Icon.component size={IconSize.regular} />
+                    </div>
+                    <div>{Icon.name}, regular</div>
+                  </div>
+                ) : (
+                  <div></div>
+                )}
+
+                {Icon.sizes.large ? (
+                  <div
+                    key={index}
+                    className="flex w-32 flex-col items-center pb-6 text-center"
+                  >
+                    <div className="inline-block">
+                      <Icon.component size={IconSize.large} />
+                    </div>
+                    <div>{Icon.name}, large</div>
+                  </div>
+                ) : (
+                  <div></div>
+                )}
+              </>
+            )}
+          </>
         ))}
       </div>
     </div>

diff --git a/src/components/ui/icons/drag.tsx b/src/components/ui/icons/drag.tsx
@@ -0,0 +1,15 @@
+function IconDrag() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      width="24"
+      height="24"
+      className="fill-current"
+    >
+      <path d="M360-160q-33 0-56.5-23.5T280-240q0-33 23.5-56.5T360-320q33 0 56.5 23.5T440-240q0 33-23.5 56.5T360-160Zm240 0q-33 0-56.5-23.5T520-240q0-33 23.5-56.5T600-320q33 0 56.5 23.5T680-240q0 33-23.5 56.5T600-160ZM360-400q-33 0-56.5-23.5T280-480q0-33 23.5-56.5T360-560q33 0 56.5 23.5T440-480q0 33-23.5 56.5T360-400Zm240 0q-33 0-56.5-23.5T520-480q0-33 23.5-56.5T600-560q33 0 56.5 23.5T680-480q0 33-23.5 56.5T600-400ZM360-640q-33 0-56.5-23.5T280-720q0-33 23.5-56.5T360-800q33 0 56.5 23.5T440-720q0 33-23.5 56.5T360-640Zm240 0q-33 0-56.5-23.5T520-720q0-33 23.5-56.5T600-800q33 0 56.5 23.5T680-720q0 33-23.5 56.5T600-640Z" />
+    </svg>
+  );
+}
+
+export default IconDrag;
diff --git a/src/components/ui/icons/edit.tsx b/src/components/ui/icons/edit.tsx
@@ -0,0 +1,15 @@
+function IconEdit() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      width="24"
+      height="24"
+      className="fill-current"
+    >
+      <path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z" />
+    </svg>
+  );
+}
+
+export default IconEdit;
diff --git a/src/components/ui/icons/image-no-border.tsx b/src/components/ui/icons/image-no-border.tsx
@@ -0,0 +1,15 @@
+function ImageNoBorder() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      className="fill-current"
+    >
+      <path d="M2 16H22L15.9095 8L10.642 14.7838L6.85597 9.72949L2 16Z" />
+    </svg>
+  );
+}
+
+export default ImageNoBorder;
diff --git a/src/components/ui/icons/merge-routes.tsx b/src/components/ui/icons/merge-routes.tsx
@@ -0,0 +1,15 @@
+function IconMergeRoutes() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      width="24px"
+      height="24px"
+      className="fill-current"
+    >
+      <path d="m256-120-56-56 193-194q23-23 35-52t12-61v-204l-64 63-56-56 160-160 160 160-56 56-64-63v204q0 32 12 61t35 52l193 194-56 56-224-224-224 224Z" />
+    </svg>
+  );
+}
+
+export default IconMergeRoutes;
diff --git a/src/components/ui/icons/move-routes.tsx b/src/components/ui/icons/move-routes.tsx
@@ -0,0 +1,15 @@
+function IconMoveRoutes() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      width="24"
+      height="24"
+      className="fill-current"
+    >
+      <path d="M160-501q0 71 47.5 122T326-322l-62-62 56-56 160 160-160 160-56-56 64-64q-105-6-176.5-81T80-500q0-109 75.5-184.5T340-760h140v80H340q-75 0-127.5 52T160-501Zm400 261v-80h320v80H560Zm0-220v-80h320v80H560Zm0-220v-80h320v80H560Z" />
+    </svg>
+  );
+}
+
+export default IconMoveRoutes;
diff --git a/src/components/ui/icons/pin.tsx b/src/components/ui/icons/pin.tsx
@@ -0,0 +1,15 @@
+function IconPin() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      width="24"
+      height="24"
+      className="fill-current"
+    >
+      <path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z" />
+    </svg>
+  );
+}
+
+export default IconPin;
diff --git a/src/components/ui/icons/publish.tsx b/src/components/ui/icons/publish.tsx
@@ -0,0 +1,15 @@
+function IconPublish() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      width="24"
+      height="24"
+      className="fill-current"
+    >
+      <path d="M440-160v-326L336-382l-56-58 200-200 200 200-56 58-104-104v326h-80ZM160-600v-120q0-33 23.5-56.5T240-800h480q33 0 56.5 23.5T800-720v120h-80v-120H240v120h-80Z" />
+    </svg>
+  );
+}
+
+export default IconPublish;
diff --git a/src/components/ui/icons/return.tsx b/src/components/ui/icons/return.tsx
@@ -0,0 +1,15 @@
+function IconReturn() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      width="24"
+      height="24"
+      className="fill-current"
+    >
+      <path d="M760-200v-160q0-50-35-85t-85-35H273l144 144-57 56-240-240 240-240 57 56-144 144h367q83 0 141.5 58.5T840-360v160h-80Z" />
+    </svg>
+  );
+}
+
+export default IconReturn;
diff --git a/src/components/ui/icons/switch-sector.tsx b/src/components/ui/icons/switch-sector.tsx
@@ -0,0 +1,15 @@
+function IconSwitchSector() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      width="24"
+      height="24"
+      className="fill-current"
+    >
+      <path d="M400-280h160v-80H400v80Zm0-160h280v-80H400v80ZM280-600h400v-80H280v80Zm200 120ZM80-80v-80h102q-48-23-77.5-68T75-330q0-79 55.5-134.5T265-520v80q-45 0-77.5 32T155-330q0 39 24 69t61 38v-97h80v240H80Zm320-40v-80h360v-560H200v160h-80v-160q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H400Z" />
+    </svg>
+  );
+}
+
+export default IconSwitchSector;