droplinked-editor-configs 1.8.0

package/src/assets/icon/System/Passport/PassportMd.tsx

@@ -0,0 +1,14 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PassportMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8.3335 14.1667H10.0002H11.6668M7.3335 18.3333H12.6668C14.067 18.3333 14.767 18.3333 15.3018 18.0608C15.7722 17.8212 16.1547 17.4387 16.3943 16.9683C16.6668 16.4335 16.6668 15.7335 16.6668 14.3333V5.66666C16.6668 4.26652 16.6668 3.56646 16.3943 3.03168C16.1547 2.56127 15.7722 2.17882 15.3018 1.93914C14.767 1.66666 14.067 1.66666 12.6668 1.66666H7.3335C5.93336 1.66666 5.2333 1.66666 4.69852 1.93914C4.22811 2.17882 3.84566 2.56127 3.60598 3.03168C3.3335 3.56646 3.3335 4.26652 3.3335 5.66666V14.3333C3.3335 15.7335 3.3335 16.4335 3.60598 16.9683C3.84566 17.4387 4.22811 17.8212 4.69852 18.0608C5.2333 18.3333 5.93336 18.3333 7.3335 18.3333Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M9.99984 10.8268C11.8408 10.8268 13.3332 9.33438 13.3332 7.49343C13.3332 5.65248 11.8408 4.1601 9.99984 4.1601C8.15889 4.1601 6.6665 5.65248 6.6665 7.49343C6.6665 9.33438 8.15889 10.8268 9.99984 10.8268Z" stroke={color} strokeWidth="0.75" stroke-miterlimit="10" />
+        <path d="M9.97419 4.14749V10.8333M9.18811 10.727C9.18811 10.727 6.69943 7.57489 9.18811 4.25986" stroke={color} strokeWidth="0.75" stroke-miterlimit="10" />
+        <path d="M9.99984 10.8268C11.8408 10.8268 13.3332 9.33438 13.3332 7.49343C13.3332 5.65248 11.8408 4.1601 9.99984 4.1601C8.15889 4.1601 6.6665 5.65248 6.6665 7.49343C6.6665 9.33438 8.15889 10.8268 9.99984 10.8268Z" stroke={color} strokeWidth="0.75" stroke-miterlimit="10" />
+        <path d="M10.812 10.727C10.812 10.727 13.3007 7.57493 10.812 4.25989" stroke={color} strokeWidth="0.75" stroke-miterlimit="10" />
+        <path d="M6.68799 7.11685C6.68799 7.11685 7.14859 8.40629 10.0001 8.40629C12.8516 8.40629 13.3122 7.11701 13.3122 7.11701" stroke={color} strokeWidth="0.75" stroke-miterlimit="10" />
+    </svg>
+
+);

package/src/assets/icon/System/Passport/PassportSm.tsx

@@ -0,0 +1,14 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PassportSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M6.6665 11.3333H7.99984H9.33317M5.8665 14.6667H10.1332C11.2533 14.6667 11.8133 14.6667 12.2412 14.4487C12.6175 14.2569 12.9234 13.951 13.1152 13.5747C13.3332 13.1468 13.3332 12.5868 13.3332 11.4667V4.53334C13.3332 3.41324 13.3332 2.85318 13.1152 2.42536C12.9234 2.04904 12.6175 1.74308 12.2412 1.55133C11.8133 1.33334 11.2533 1.33334 10.1332 1.33334H5.8665C4.7464 1.33334 4.18634 1.33334 3.75852 1.55133C3.3822 1.74308 3.07624 2.04904 2.88449 2.42536C2.6665 2.85318 2.6665 3.41324 2.6665 4.53334V11.4667C2.6665 12.5868 2.6665 13.1468 2.88449 13.5747C3.07624 13.951 3.3822 14.2569 3.75852 14.4487C4.18634 14.6667 4.7464 14.6667 5.8665 14.6667Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M8.00016 8.6614C9.47292 8.6614 10.6668 7.46749 10.6668 5.99473C10.6668 4.52197 9.47292 3.32806 8.00016 3.32806C6.5274 3.32806 5.3335 4.52197 5.3335 5.99473C5.3335 7.46749 6.5274 8.6614 8.00016 8.6614Z" stroke={color} strokeWidth="0.5" stroke-miterlimit="10" />
+        <path d="M7.97906 3.31799V8.66667M7.3502 8.58159C7.3502 8.58159 5.35925 6.05991 7.3502 3.40788" stroke={color} strokeWidth="0.5" stroke-miterlimit="10" />
+        <path d="M8.00016 8.6614C9.47292 8.6614 10.6668 7.46749 10.6668 5.99473C10.6668 4.52197 9.47292 3.32806 8.00016 3.32806C6.5274 3.32806 5.3335 4.52197 5.3335 5.99473C5.3335 7.46749 6.5274 8.6614 8.00016 8.6614Z" stroke={color} strokeWidth="0.5" stroke-miterlimit="10" />
+        <path d="M8.64941 8.5816C8.64941 8.5816 10.6404 6.05993 8.64941 3.4079" stroke={color} strokeWidth="0.5" stroke-miterlimit="10" />
+        <path d="M5.3501 5.69348C5.3501 5.69348 5.71858 6.72503 7.99976 6.72503C10.281 6.72503 10.6494 5.69361 10.6494 5.69361" stroke={color} strokeWidth="0.5" stroke-miterlimit="10" />
+    </svg>
+
+);

package/src/assets/icon/System/Pause/PauseLg.tsx

@@ -0,0 +1,8 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PauseLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8 5V19M16 5V19" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+);

package/src/assets/icon/System/Pause/PauseMd.tsx

@@ -0,0 +1,8 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PauseMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M6.6665 4.16667V15.8333M13.3332 4.16667V15.8333" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+);

package/src/assets/icon/System/Pause/PauseSm.tsx

@@ -0,0 +1,8 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PauseSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M5.3335 3.33333V12.6667M10.6668 3.33333V12.6667" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+);

package/src/assets/icon/System/Phone/PhoneLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PhoneLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M20.9994 16.4765V19.1862C21.0005 19.4377 20.9488 19.6867 20.8479 19.9172C20.7469 20.1477 20.5988 20.3546 20.413 20.5247C20.2273 20.6947 20.008 20.8242 19.7693 20.9048C19.5305 20.9854 19.2775 21.0153 19.0265 20.9927C16.2415 20.6907 13.5664 19.7409 11.216 18.2197C9.02929 16.8329 7.17534 14.9827 5.7858 12.8003C4.25627 10.4439 3.30442 7.76107 3.00735 4.96915C2.98473 4.71938 3.01447 4.46764 3.09468 4.22996C3.17489 3.99229 3.30381 3.77389 3.47323 3.58866C3.64265 3.40343 3.84885 3.25544 4.07872 3.15411C4.30858 3.05278 4.55707 3.00032 4.80837 3.00009H7.52347C7.96269 2.99577 8.3885 3.151 8.72152 3.43683C9.05455 3.72267 9.27207 4.11961 9.33354 4.55366C9.44814 5.42084 9.66067 6.27229 9.96707 7.09177C10.0888 7.41507 10.1152 7.76642 10.043 8.1042C9.97082 8.44198 9.80313 8.75203 9.5598 8.99761L8.41041 10.1447C9.69877 12.406 11.5748 14.2784 13.8406 15.5642L14.99 14.4171C15.2361 14.1742 15.5467 14.0069 15.8852 13.9348C16.2236 13.8628 16.5757 13.8891 16.8996 14.0106C17.7207 14.3164 18.5739 14.5285 19.4428 14.6429C19.8824 14.7048 20.2839 14.9258 20.5709 15.2639C20.858 15.6019 21.0105 16.0335 20.9994 16.4765Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Phone/PhoneMd.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PhoneMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M17.4995 13.7304V15.9885C17.5004 16.1981 17.4574 16.4056 17.3732 16.5977C17.2891 16.7898 17.1657 16.9622 17.0109 17.1039C16.8561 17.2456 16.6734 17.3535 16.4744 17.4207C16.2754 17.4878 16.0646 17.5128 15.8554 17.4939C13.5346 17.2422 11.3053 16.4508 9.34668 15.1831C7.52441 14.0274 5.97945 12.4855 4.8215 10.6669C3.5469 8.70324 2.75368 6.46756 2.50612 4.14096C2.48727 3.93282 2.51206 3.72303 2.5789 3.52497C2.64574 3.32691 2.75317 3.1449 2.89436 2.99055C3.03554 2.83619 3.20738 2.71287 3.39893 2.62843C3.59049 2.54398 3.79756 2.50027 4.00697 2.50007H6.26956C6.63558 2.49648 6.99041 2.62583 7.26793 2.86403C7.54546 3.10222 7.72672 3.43301 7.77795 3.79472C7.87345 4.51736 8.05055 5.22691 8.30589 5.90981C8.40736 6.17922 8.42932 6.47202 8.36917 6.7535C8.30902 7.03498 8.16928 7.29336 7.9665 7.49801L7.00867 8.45394C8.08231 10.3384 9.64568 11.8986 11.5338 12.9702L12.4917 12.0142C12.6967 11.8118 12.9556 11.6724 13.2377 11.6123C13.5197 11.5523 13.8131 11.5742 14.083 11.6755C14.7673 11.9303 15.4782 12.1071 16.2023 12.2024C16.5687 12.254 16.9033 12.4381 17.1424 12.7199C17.3816 13.0016 17.5087 13.3612 17.4995 13.7304Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Phone/PhoneSm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PhoneSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M13.9996 10.9843V12.7908C14.0003 12.9585 13.9659 13.1245 13.8986 13.2781C13.8313 13.4318 13.7325 13.5697 13.6087 13.6831C13.4849 13.7965 13.3387 13.8828 13.1795 13.9365C13.0203 13.9903 12.8517 14.0102 12.6843 13.9951C10.8277 13.7938 9.04426 13.1606 7.47734 12.1465C6.01953 11.222 4.78356 9.98843 3.8572 8.53351C2.83752 6.96259 2.20294 5.17405 2.0049 3.31277C1.98982 3.14625 2.00965 2.97843 2.06312 2.81998C2.11659 2.66153 2.20254 2.51592 2.31548 2.39244C2.42843 2.26896 2.5659 2.1703 2.71915 2.10274C2.87239 2.03519 3.03805 2.00022 3.20558 2.00006H5.01565C5.30846 1.99718 5.59233 2.10067 5.81435 2.29122C6.03636 2.48178 6.18138 2.74641 6.22236 3.03578C6.29876 3.61389 6.44044 4.18152 6.64471 4.72785C6.72589 4.94338 6.74346 5.17761 6.69534 5.4028C6.64721 5.62799 6.53542 5.83469 6.3732 5.99841L5.60694 6.76315C6.46585 8.27069 7.71655 9.51891 9.22708 10.3761L9.99334 9.61138C10.1574 9.44948 10.3645 9.33791 10.5901 9.28988C10.8158 9.24185 11.0505 9.25939 11.2664 9.3404C11.8138 9.54427 12.3826 9.68567 12.9619 9.76192C13.2549 9.80318 13.5226 9.95052 13.714 10.1759C13.9053 10.4013 14.007 10.689 13.9996 10.9843Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Pin/PinLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PinLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8.37658 15.6163L2.71973 21.2732M11.6943 6.64185L10.1334 8.20273C10.0061 8.33006 9.9424 8.39372 9.86986 8.4443C9.80548 8.4892 9.73604 8.52637 9.66297 8.55503C9.58065 8.58732 9.49236 8.60498 9.3158 8.64029L5.65133 9.37318C4.69903 9.56364 4.22288 9.65887 4.00012 9.90993C3.80605 10.1286 3.71743 10.4213 3.75758 10.711C3.80367 11.0434 4.14703 11.3868 4.83375 12.0735L11.9195 19.1592C12.6062 19.8459 12.9496 20.1893 13.282 20.2354C13.5716 20.2755 13.8643 20.1869 14.083 19.9929C14.3341 19.7701 14.4293 19.2939 14.6198 18.3416L15.3527 14.6772C15.388 14.5006 15.4056 14.4123 15.4379 14.33C15.4666 14.2569 15.5038 14.1875 15.5487 14.1231C15.5992 14.0506 15.6629 13.9869 15.7902 13.8596L17.3511 12.2987C17.4325 12.2173 17.4732 12.1766 17.518 12.1411C17.5577 12.1095 17.5998 12.081 17.6439 12.0558C17.6935 12.0275 17.7464 12.0048 17.8522 11.9594L20.3466 10.8904C21.0743 10.5786 21.4381 10.4226 21.6034 10.1706C21.7479 9.95028 21.7996 9.68178 21.7473 9.42351C21.6874 9.12816 21.4075 8.84825 20.8477 8.28842L15.7045 3.14529C15.1447 2.58546 14.8648 2.30555 14.5695 2.24568C14.3112 2.19332 14.0427 2.24503 13.8223 2.38956C13.5703 2.55484 13.4144 2.91869 13.1025 3.64639L12.0335 6.14075C11.9882 6.24656 11.9655 6.29947 11.9372 6.34908C11.912 6.39316 11.8835 6.43525 11.8519 6.47499C11.8164 6.51974 11.7757 6.56044 11.6943 6.64185Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Pin/PinMd.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PinMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M6.98065 13.0136L2.2666 17.7277M9.74539 5.53487L8.44465 6.83561C8.33854 6.94171 8.28549 6.99476 8.22505 7.03692C8.1714 7.07434 8.11353 7.10531 8.05264 7.12919C7.98404 7.1561 7.91047 7.17081 7.76333 7.20024L4.70961 7.81099C3.91602 7.9697 3.51923 8.04906 3.33359 8.25827C3.17187 8.44053 3.09802 8.68444 3.13148 8.9258C3.16989 9.20284 3.45602 9.48897 4.02829 10.0612L9.93307 15.966C10.5053 16.5383 10.7915 16.8244 11.0685 16.8628C11.3099 16.8963 11.5538 16.8224 11.736 16.6607C11.9452 16.4751 12.0246 16.0783 12.1833 15.2847L12.7941 12.231C12.8235 12.0838 12.8382 12.0103 12.8651 11.9417C12.889 11.8808 12.92 11.8229 12.9574 11.7693C12.9995 11.7088 13.0526 11.6558 13.1587 11.5497L14.4594 10.2489C14.5273 10.1811 14.5612 10.1472 14.5985 10.1175C14.6316 10.0912 14.6667 10.0675 14.7034 10.0465C14.7447 10.0229 14.7888 10.004 14.877 9.9662L16.9556 9.07536C17.5621 8.81546 17.8653 8.68552 18.003 8.47553C18.1234 8.2919 18.1665 8.06815 18.1229 7.85292C18.073 7.6068 17.8398 7.37354 17.3732 6.90702L13.0873 2.62107C12.6208 2.15455 12.3875 1.92129 12.1414 1.8714C11.9262 1.82777 11.7024 1.87086 11.5188 1.9913C11.3088 2.12903 11.1788 2.43224 10.9189 3.03866L10.0281 5.11729C9.99031 5.20547 9.97142 5.24956 9.9478 5.2909C9.92682 5.32763 9.90307 5.36271 9.87676 5.39583C9.84714 5.43311 9.81322 5.46703 9.74539 5.53487Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Pin/PinSm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PinSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M5.58471 10.4109L1.81348 14.1821M7.7965 4.4279L6.75591 5.46849C6.67103 5.55337 6.62859 5.59581 6.58023 5.62954C6.53731 5.65947 6.49102 5.68425 6.44231 5.70335C6.38742 5.72488 6.32857 5.73665 6.21086 5.76019L3.76788 6.24879C3.13301 6.37576 2.81558 6.43925 2.66707 6.60662C2.53769 6.75242 2.47861 6.94755 2.50538 7.14064C2.53611 7.36227 2.76501 7.59118 3.22282 8.04899L7.94665 12.7728C8.40446 13.2306 8.63336 13.4595 8.855 13.4903C9.04808 13.517 9.24321 13.4579 9.38902 13.3286C9.55639 13.1801 9.61987 12.8626 9.74685 12.2278L10.2354 9.78478C10.259 9.66707 10.2708 9.60821 10.2923 9.55333C10.3114 9.50462 10.3362 9.45832 10.3661 9.4154C10.3998 9.36705 10.4423 9.32461 10.5271 9.23972L11.5677 8.19913C11.622 8.14486 11.6491 8.11773 11.679 8.09404C11.7055 8.07299 11.7335 8.05399 11.7629 8.0372C11.796 8.01831 11.8313 8.00319 11.9018 7.97296L13.5647 7.26029C14.0498 7.05237 14.2924 6.94841 14.4026 6.78042C14.499 6.63352 14.5334 6.45452 14.4985 6.28234C14.4586 6.08544 14.272 5.89883 13.8988 5.52562L10.47 2.09686C10.0968 1.72364 9.91019 1.53703 9.7133 1.49712C9.54112 1.46221 9.36212 1.49669 9.21521 1.59304C9.04722 1.70323 8.94327 1.94579 8.73535 2.43093L8.02268 4.09383C7.99244 4.16437 7.97733 4.19965 7.95843 4.23272C7.94165 4.2621 7.92265 4.29017 7.9016 4.31666C7.87791 4.34649 7.85077 4.37363 7.7965 4.4279Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Play/PlayLg.tsx

@@ -0,0 +1,10 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PlayLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M15.0551 12.6144C15.2556 12.4741 15.375 12.2447 15.375 12C15.375 11.7553 15.2556 11.5259 15.0551 11.3856L11.3051 8.76058C11.076 8.6002 10.7767 8.58062 10.5286 8.70977C10.2806 8.83891 10.125 9.09534 10.125 9.375V14.625C10.125 14.9047 10.2806 15.1611 10.5286 15.2902C10.7767 15.4194 11.076 15.3998 11.3051 15.2394L15.0551 12.6144Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Play/PlayMd.tsx

@@ -0,0 +1,10 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PlayMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M12.6176 10.6144C12.8181 10.4741 12.9375 10.2447 12.9375 10C12.9375 9.75526 12.8181 9.52592 12.6176 9.38558L9.4926 7.19808C9.26349 7.0377 8.96419 7.01812 8.71614 7.14727C8.46809 7.27641 8.3125 7.53284 8.3125 7.8125V12.1875C8.3125 12.4672 8.46809 12.7236 8.71614 12.8527C8.96419 12.9819 9.26349 12.9623 9.4926 12.8019L12.6176 10.6144Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Play/PlaySm.tsx

@@ -0,0 +1,10 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PlaySm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M10.0367 8.40962C10.1704 8.31605 10.25 8.16316 10.25 8C10.25 7.83684 10.1704 7.68395 10.0367 7.59038L7.53673 5.84038C7.384 5.73347 7.18446 5.72041 7.01909 5.80651C6.85373 5.89261 6.75 6.06356 6.75 6.25V9.75C6.75 9.93644 6.85373 10.1074 7.01909 10.1935C7.18446 10.2796 7.384 10.2665 7.53673 10.1596L10.0367 8.40962Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Play2/Play2Lg.tsx

@@ -0,0 +1,8 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const Play2Lg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M16.0417 9.21096C17.6632 10.123 18.4739 10.5791 18.744 11.1783C18.9794 11.7008 18.9794 12.2992 18.744 12.8217C18.4739 13.4209 17.6632 13.877 16.0417 14.789L9.76884 18.3175C8.2012 19.1993 7.41738 19.6402 6.77534 19.5677C6.21522 19.5043 5.70782 19.2076 5.37802 18.7504C5 18.2264 5 17.3271 5 15.5285V8.47152C5 6.67289 5 5.77358 5.37802 5.24958C5.70782 4.79243 6.21522 4.49568 6.77534 4.43236C7.41738 4.35978 8.2012 4.80068 9.76884 5.68247L16.0417 9.21096Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+);

package/src/assets/icon/System/Play2/Play2Md.tsx

@@ -0,0 +1,8 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const Play2Md = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M13.3679 7.67579C14.7192 8.43583 15.3948 8.81591 15.6198 9.31524C15.816 9.75066 15.816 10.2493 15.6198 10.6847C15.3948 11.1841 14.7192 11.5642 13.3679 12.3242L8.14054 15.2646C6.83417 15.9994 6.18099 16.3668 5.64595 16.3064C5.17919 16.2536 4.75635 16.0063 4.48152 15.6253C4.1665 15.1887 4.1665 14.4392 4.1665 12.9404V7.05959C4.1665 5.56074 4.1665 4.81131 4.48152 4.37464C4.75635 3.99369 5.17919 3.74639 5.64595 3.69363C6.18099 3.63314 6.83417 4.00056 8.14054 4.73539L13.3679 7.67579Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+);

package/src/assets/icon/System/Play2/Play2Sm.tsx

@@ -0,0 +1,8 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const Play2Sm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M10.6946 6.14063C11.7756 6.74866 12.3161 7.05273 12.4962 7.45219C12.6531 7.80053 12.6531 8.19946 12.4962 8.54779C12.3161 8.94726 11.7756 9.25133 10.6946 9.85933L6.51272 12.2117C5.46763 12.7995 4.94508 13.0935 4.51706 13.0451C4.14364 13.0029 3.80538 12.8051 3.58551 12.5003C3.3335 12.1509 3.3335 11.5514 3.3335 10.3523V5.64767C3.3335 4.44859 3.3335 3.84905 3.58551 3.49971C3.80538 3.19495 4.14364 2.99711 4.51706 2.9549C4.94508 2.90651 5.46763 3.20045 6.51272 3.78831L10.6946 6.14063Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+);

package/src/assets/icon/System/Puzzle/PuzzleLg.tsx

@@ -0,0 +1,16 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PuzzleLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_11980_179)">
+            <path d="M5.99962 20.25C5.80071 20.25 5.60994 20.171 5.46929 20.0303C5.32864 19.8897 5.24962 19.6989 5.24962 19.5V15.4978C4.84952 15.6871 4.40806 15.7722 3.96627 15.7451C3.52447 15.718 3.09671 15.5796 2.72274 15.3428C2.34878 15.1061 2.04075 14.7786 1.82731 14.3908C1.61388 14.0031 1.50195 13.5676 1.50195 13.125C1.50195 12.6824 1.61388 12.2469 1.82731 11.8592C2.04075 11.4714 2.34878 11.1439 2.72274 10.9072C3.09671 10.6704 3.52447 10.532 3.96627 10.5049C4.40806 10.4778 4.84952 10.5629 5.24962 10.7522V6.75C5.24962 6.55109 5.32864 6.36032 5.46929 6.21967C5.60994 6.07902 5.80071 6 5.99962 6H10.3768C10.1873 5.5999 10.1021 5.15837 10.129 4.71647C10.156 4.27458 10.2943 3.84669 10.531 3.47259C10.7678 3.0985 11.0953 2.79036 11.4831 2.57684C11.8709 2.36331 12.3064 2.25134 12.7492 2.25134C13.1919 2.25134 13.6274 2.36331 14.0152 2.57684C14.403 2.79036 14.7305 3.0985 14.9673 3.47259C15.204 3.84669 15.3423 4.27458 15.3693 4.71647C15.3962 5.15837 15.311 5.5999 15.1215 6H19.4996C19.6985 6 19.8893 6.07902 20.03 6.21967C20.1706 6.36032 20.2496 6.55109 20.2496 6.75V10.7522C19.8495 10.5629 19.4081 10.4778 18.9663 10.5049C18.5245 10.532 18.0967 10.6704 17.7227 10.9072C17.3488 11.1439 17.0408 11.4714 16.8273 11.8592C16.6139 12.2469 16.502 12.6824 16.502 13.125C16.502 13.5676 16.6139 14.0031 16.8273 14.3908C17.0408 14.7786 17.3488 15.1061 17.7227 15.3428C18.0967 15.5796 18.5245 15.718 18.9663 15.7451C19.4081 15.7722 19.8495 15.6871 20.2496 15.4978V19.5C20.2496 19.6989 20.1706 19.8897 20.03 20.0303C19.8893 20.171 19.6985 20.25 19.4996 20.25H5.99962Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_11980_179">
+                <rect width="24" height="24" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Puzzle/PuzzleMd.tsx

@@ -0,0 +1,16 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PuzzleMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_11980_176)">
+            <path d="M5.00001 16.875C4.83425 16.875 4.67528 16.8092 4.55807 16.692C4.44086 16.5747 4.37501 16.4158 4.37501 16.25V12.9149C4.0416 13.0726 3.67371 13.1435 3.30555 13.1209C2.93739 13.0983 2.58092 12.983 2.26928 12.7857C1.95764 12.5884 1.70095 12.3155 1.52309 11.9924C1.34522 11.6692 1.25195 11.3064 1.25195 10.9375C1.25195 10.5687 1.34522 10.2058 1.52309 9.88267C1.70095 9.55953 1.95764 9.28662 2.26928 9.08931C2.58092 8.892 2.93739 8.77669 3.30555 8.75411C3.67371 8.73154 4.0416 8.80242 4.37501 8.96017V5.62501C4.37501 5.45925 4.44086 5.30028 4.55807 5.18307C4.67528 5.06586 4.83425 5.00001 5.00001 5.00001H8.64767C8.48974 4.66659 8.41871 4.29865 8.44118 3.93041C8.46365 3.56216 8.57889 3.20558 8.77618 2.89384C8.97346 2.58209 9.24639 2.32531 9.56958 2.14737C9.89276 1.96944 10.2557 1.87613 10.6246 1.87613C10.9935 1.87613 11.3565 1.96944 11.6797 2.14737C12.0028 2.32531 12.2758 2.58209 12.4731 2.89384C12.6704 3.20558 12.7856 3.56216 12.8081 3.93041C12.8305 4.29865 12.7595 4.66659 12.6016 5.00001H16.25C16.4158 5.00001 16.5747 5.06586 16.692 5.18307C16.8092 5.30028 16.875 5.45925 16.875 5.62501V8.96017C16.5416 8.80242 16.1737 8.73154 15.8055 8.75411C15.4374 8.77669 15.0809 8.892 14.7693 9.08931C14.4576 9.28662 14.201 9.55953 14.0231 9.88267C13.8452 10.2058 13.752 10.5687 13.752 10.9375C13.752 11.3064 13.8452 11.6692 14.0231 11.9924C14.201 12.3155 14.4576 12.5884 14.7693 12.7857C15.0809 12.983 15.4374 13.0983 15.8055 13.1209C16.1737 13.1435 16.5416 13.0726 16.875 12.9149V16.25C16.875 16.4158 16.8092 16.5747 16.692 16.692C16.5747 16.8092 16.4158 16.875 16.25 16.875H5.00001Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_11980_176">
+                <rect width="20" height="20" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Puzzle/PuzzleSm.tsx

@@ -0,0 +1,16 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const PuzzleSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_11980_173)">
+            <path d="M4.0004 13.5C3.86779 13.5 3.74061 13.4473 3.64685 13.3535C3.55308 13.2598 3.5004 13.1326 3.5004 13V10.3319C3.23367 10.4581 2.93935 10.5148 2.64483 10.4967C2.3503 10.4786 2.06512 10.3864 1.81581 10.2286C1.5665 10.0707 1.36115 9.85237 1.21886 9.59387C1.07657 9.33536 1.00195 9.04507 1.00195 8.74999C1.00195 8.45491 1.07657 8.16462 1.21886 7.90612C1.36115 7.64761 1.5665 7.42928 1.81581 7.27143C2.06512 7.11358 2.3503 7.02134 2.64483 7.00327C2.93935 6.98521 3.23367 7.04192 3.5004 7.16812V4.49999C3.5004 4.36738 3.55308 4.24021 3.64685 4.14644C3.74061 4.05267 3.86779 3.99999 4.0004 3.99999H6.91852C6.79219 3.73326 6.73536 3.4389 6.75333 3.14431C6.77131 2.84971 6.8635 2.56445 7.02133 2.31505C7.17916 2.06566 7.39751 1.86023 7.65605 1.71788C7.9146 1.57553 8.20494 1.50089 8.50009 1.50089C8.79523 1.50089 9.08558 1.57553 9.34412 1.71788C9.60267 1.86023 9.82101 2.06566 9.97884 2.31505C10.1367 2.56445 10.2289 2.84971 10.2468 3.14431C10.2648 3.4389 10.208 3.73326 10.0816 3.99999H13.0004C13.133 3.99999 13.2602 4.05267 13.354 4.14644C13.4477 4.24021 13.5004 4.36738 13.5004 4.49999V7.16812C13.2337 7.04192 12.9394 6.98521 12.6448 7.00327C12.3503 7.02134 12.0651 7.11358 11.8158 7.27143C11.5665 7.42928 11.3612 7.64761 11.2189 7.90612C11.0766 8.16462 11.002 8.45491 11.002 8.74999C11.002 9.04507 11.0766 9.33536 11.2189 9.59387C11.3612 9.85237 11.5665 10.0707 11.8158 10.2286C12.0651 10.3864 12.3503 10.4786 12.6448 10.4967C12.9394 10.5148 13.2337 10.4581 13.5004 10.3319V13C13.5004 13.1326 13.4477 13.2598 13.354 13.3535C13.2602 13.4473 13.133 13.5 13.0004 13.5H4.0004Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_11980_173">
+                <rect width="16" height="16" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Ribbon/RibbonLg.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const RibbonLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M12 13.5C15.3137 13.5 18 10.8137 18 7.5C18 4.18629 15.3137 1.5 12 1.5C8.68629 1.5 6 4.18629 6 7.5C6 10.8137 8.68629 13.5 12 13.5Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M6.73359 10.6791L2.25 18.75L6.32156 18.7303C6.45202 18.7297 6.58038 18.763 6.69399 18.8272C6.8076 18.8913 6.90252 18.9839 6.96938 19.0959L9 22.5L13.1405 13.3912" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M17.1816 10.5L21.75 18.75L17.6784 18.7303C17.548 18.7297 17.4196 18.763 17.306 18.8272C17.1924 18.8913 17.0975 18.9839 17.0306 19.0959L15 22.5L12 15.9" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M12 10.5C13.6569 10.5 15 9.15685 15 7.5C15 5.84315 13.6569 4.5 12 4.5C10.3431 4.5 9 5.84315 9 7.5C9 9.15685 10.3431 10.5 12 10.5Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Ribbon/RibbonMd.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const RibbonMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M10 11.25C12.7614 11.25 15 9.01142 15 6.25C15 3.48858 12.7614 1.25 10 1.25C7.23858 1.25 5 3.48858 5 6.25C5 9.01142 7.23858 11.25 10 11.25Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M5.61133 8.89922L1.875 15.625L5.26797 15.6086C5.37668 15.608 5.48365 15.6359 5.57833 15.6893C5.673 15.7427 5.7521 15.8199 5.80781 15.9133L7.5 18.75L10.9504 11.1594" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M14.318 8.75L18.125 15.625L14.732 15.6086C14.6233 15.608 14.5163 15.6359 14.4217 15.6893C14.327 15.7427 14.2479 15.8199 14.1922 15.9133L12.5 18.75L10 13.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M10 8.75C11.3807 8.75 12.5 7.63071 12.5 6.25C12.5 4.86929 11.3807 3.75 10 3.75C8.61929 3.75 7.5 4.86929 7.5 6.25C7.5 7.63071 8.61929 8.75 10 8.75Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Ribbon/RibbonSm.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const RibbonSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8 9C10.2091 9 12 7.20914 12 5C12 2.79086 10.2091 1 8 1C5.79086 1 4 2.79086 4 5C4 7.20914 5.79086 9 8 9Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M4.48906 7.11937L1.5 12.5L4.21438 12.4869C4.30134 12.4864 4.38692 12.5087 4.46266 12.5514C4.5384 12.5942 4.60168 12.6559 4.64625 12.7306L6 15L8.76031 8.92749" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M11.4544 7L14.5 12.5L11.7856 12.4869C11.6987 12.4864 11.6131 12.5087 11.5373 12.5514C11.4616 12.5942 11.3983 12.6559 11.3538 12.7306L10 15L8 10.6" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M8 7C9.10457 7 10 6.10457 10 5C10 3.89543 9.10457 3 8 3C6.89543 3 6 3.89543 6 5C6 6.10457 6.89543 7 8 7Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Robot/RobotLg.tsx

@@ -0,0 +1,22 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const RobotLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_11883_33)">
+            <path d="M18.75 5.25H5.25C4.00736 5.25 3 6.25736 3 7.5V18C3 19.2426 4.00736 20.25 5.25 20.25H18.75C19.9926 20.25 21 19.2426 21 18V7.5C21 6.25736 19.9926 5.25 18.75 5.25Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M15.375 13.5H8.625C7.58947 13.5 6.75 14.3395 6.75 15.375C6.75 16.4105 7.58947 17.25 8.625 17.25H15.375C16.4105 17.25 17.25 16.4105 17.25 15.375C17.25 14.3395 16.4105 13.5 15.375 13.5Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M13.5 13.5V17.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M10.5 13.5V17.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12 5.25V1.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M7.875 11.0625C8.39277 11.0625 8.8125 10.6428 8.8125 10.125C8.8125 9.60723 8.39277 9.1875 7.875 9.1875C7.35723 9.1875 6.9375 9.60723 6.9375 10.125C6.9375 10.6428 7.35723 11.0625 7.875 11.0625Z" fill={color} />
+            <path d="M16.125 11.0625C16.6428 11.0625 17.0625 10.6428 17.0625 10.125C17.0625 9.60723 16.6428 9.1875 16.125 9.1875C15.6072 9.1875 15.1875 9.60723 15.1875 10.125C15.1875 10.6428 15.6072 11.0625 16.125 11.0625Z" fill={color} />
+        </g>
+        <defs>
+            <clipPath id="clip0_11883_33">
+                <rect width="24" height="24" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Robot/RobotMd.tsx

@@ -0,0 +1,22 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const RobotMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_11883_35)">
+            <path d="M15.625 4.375H4.375C3.33947 4.375 2.5 5.21447 2.5 6.25V15C2.5 16.0355 3.33947 16.875 4.375 16.875H15.625C16.6605 16.875 17.5 16.0355 17.5 15V6.25C17.5 5.21447 16.6605 4.375 15.625 4.375Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12.8125 11.25H7.1875C6.32456 11.25 5.625 11.9496 5.625 12.8125C5.625 13.6754 6.32456 14.375 7.1875 14.375H12.8125C13.6754 14.375 14.375 13.6754 14.375 12.8125C14.375 11.9496 13.6754 11.25 12.8125 11.25Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M11.25 11.25V14.375" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M8.75 11.25V14.375" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M10 4.375V1.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M6.5625 9.21875C6.99397 9.21875 7.34375 8.86897 7.34375 8.4375C7.34375 8.00603 6.99397 7.65625 6.5625 7.65625C6.13103 7.65625 5.78125 8.00603 5.78125 8.4375C5.78125 8.86897 6.13103 9.21875 6.5625 9.21875Z" fill={color} />
+            <path d="M13.4375 9.21875C13.869 9.21875 14.2188 8.86897 14.2188 8.4375C14.2188 8.00603 13.869 7.65625 13.4375 7.65625C13.006 7.65625 12.6562 8.00603 12.6562 8.4375C12.6562 8.86897 13.006 9.21875 13.4375 9.21875Z" fill={color} />
+        </g>
+        <defs>
+            <clipPath id="clip0_11883_35">
+                <rect width="20" height="20" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Robot/RobotSm.tsx

@@ -0,0 +1,22 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const RobotSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_11883_44)">
+            <path d="M12.5 3.5H3.5C2.67157 3.5 2 4.17157 2 5V12C2 12.8284 2.67157 13.5 3.5 13.5H12.5C13.3284 13.5 14 12.8284 14 12V5C14 4.17157 13.3284 3.5 12.5 3.5Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M10.25 9H5.75C5.05964 9 4.5 9.55964 4.5 10.25C4.5 10.9404 5.05964 11.5 5.75 11.5H10.25C10.9404 11.5 11.5 10.9404 11.5 10.25C11.5 9.55964 10.9404 9 10.25 9Z" stroke={color} strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M9 9V11.5" stroke={color} strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M7 9V11.5" stroke={color} strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M8 3.5V1" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M5.25 7.375C5.59518 7.375 5.875 7.09518 5.875 6.75C5.875 6.40482 5.59518 6.125 5.25 6.125C4.90482 6.125 4.625 6.40482 4.625 6.75C4.625 7.09518 4.90482 7.375 5.25 7.375Z" fill={color} />
+            <path d="M10.75 7.375C11.0952 7.375 11.375 7.09518 11.375 6.75C11.375 6.40482 11.0952 6.125 10.75 6.125C10.4048 6.125 10.125 6.40482 10.125 6.75C10.125 7.09518 10.4048 7.375 10.75 7.375Z" fill={color} />
+        </g>
+        <defs>
+            <clipPath id="clip0_11883_44">
+                <rect width="16" height="16" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Ruleset/RulesetLg.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const RulesetLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8.29412 9H7.43958C6.97342 9 6.74034 9 6.52099 9.05425C6.32653 9.10236 6.14062 9.1817 5.9701 9.28936C5.77776 9.41079 5.61294 9.58058 5.28332 9.92018L3.89315 11.3525C3.56353 11.6921 3.39871 11.8619 3.28085 12.0601C3.17636 12.2357 3.09935 12.4273 3.05266 12.6277C3 12.8536 3 13.0939 3 13.5741V17.8582C3 18.9579 3 19.5077 3.20773 19.9279C3.39045 20.2973 3.68202 20.5977 4.04063 20.786C4.44832 21 4.98202 21 6.04941 21H17.9506C19.018 21 19.5516 21 19.9594 20.786C20.318 20.5977 20.6095 20.2973 20.7923 19.9279C21 19.5077 21 18.9579 21 17.8582V13.5741C21 13.0939 21 12.8536 20.9474 12.6277C20.9007 12.4273 20.8236 12.2357 20.7192 12.0601C20.6012 11.8619 20.4365 11.6921 20.1069 11.3525L18.7166 9.92018C18.387 9.58058 18.2223 9.41079 18.0299 9.28936C17.8594 9.1817 17.6735 9.10236 17.479 9.05425C17.2597 9 17.0266 9 16.5605 9H15.7059" stroke={color} strokeWidth="2" />
+        <path d="M21 13.5H18.291C17.5544 13.5 17.186 13.5 16.9087 13.6888C16.6315 13.8775 16.515 14.2075 16.2821 14.8675L16.1885 15.1325C15.9556 15.7925 15.8391 16.1225 15.5619 16.3112C15.2846 16.5 14.9162 16.5 14.1796 16.5H9.82043C9.08379 16.5 8.71547 16.5 8.43817 16.3112C8.16088 16.1225 8.04441 15.7925 7.81145 15.1325L7.71796 14.8675C7.48501 14.2075 7.36854 13.8775 7.09124 13.6888C6.81395 13.5 6.44562 13.5 5.70898 13.5H3" stroke={color} strokeWidth="2" />
+        <path d="M14 6.5H14.7C14.8657 6.5 15 6.6343 15 6.8V10.2C15 10.3657 14.8657 10.5 14.7 10.5H9.3C9.13431 10.5 9 10.3657 9 10.2V6.8C9 6.6343 9.13431 6.5 9.3 6.5H10M14 6.5V5C14 4.33333 13.6 3 12 3C10.4 3 10 4.33333 10 5V6.5M14 6.5H10" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Ruleset/RulesetMd.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const RulesetMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M7.91176 7.5H6.19965C5.81118 7.5 5.61695 7.5 5.43416 7.54521C5.27211 7.5853 5.11718 7.65142 4.97508 7.74114C4.8148 7.84233 4.67745 7.98382 4.40277 8.26682L3.24429 9.46045C2.96961 9.74345 2.83226 9.88491 2.73404 10.0501C2.64696 10.1965 2.58279 10.3561 2.54388 10.5231C2.5 10.7114 2.5 10.9115 2.5 11.3117V14.8818C2.5 15.7983 2.5 16.2565 2.67311 16.6065C2.82538 16.9145 3.06835 17.1647 3.36719 17.3216C3.70694 17.5 4.15169 17.5 5.04118 17.5H14.9588C15.8483 17.5 16.293 17.5 16.6328 17.3216C16.9317 17.1647 17.1746 16.9145 17.3269 16.6065C17.5 16.2565 17.5 15.7983 17.5 14.8818V11.3117C17.5 10.9115 17.5 10.7114 17.4561 10.5231C17.4172 10.3561 17.353 10.1965 17.266 10.0501C17.1677 9.88491 17.0304 9.74345 16.7557 9.46045L15.5972 8.26682C15.3225 7.98382 15.1852 7.84233 15.0249 7.74114C14.8829 7.65142 14.7279 7.5853 14.5658 7.54521C14.3831 7.5 14.1888 7.5 13.8004 7.5H12.0882" stroke={color} strokeWidth="1.5" />
+        <path d="M17.5 11.25H15.2425C14.6286 11.25 14.3217 11.25 14.0906 11.4073C13.8596 11.5646 13.7625 11.8396 13.5684 12.3896L13.4904 12.6104C13.2963 13.1604 13.1992 13.4354 12.9682 13.5927C12.7371 13.75 12.4302 13.75 11.8163 13.75H8.18369C7.56982 13.75 7.26289 13.75 7.03181 13.5927C6.80073 13.4354 6.70367 13.1604 6.50954 12.6104L6.43163 12.3896C6.23751 11.8396 6.14045 11.5646 5.90937 11.4073C5.67829 11.25 5.37135 11.25 4.75748 11.25H2.5" stroke={color} strokeWidth="1.5" />
+        <path d="M11.6667 5.41667H12.25C12.3881 5.41667 12.5 5.52858 12.5 5.66667V8.5C12.5 8.63808 12.3881 8.75 12.25 8.75H7.75C7.61193 8.75 7.5 8.63808 7.5 8.5V5.66667C7.5 5.52858 7.61193 5.41667 7.75 5.41667H8.33333M11.6667 5.41667V4.16667C11.6667 3.61111 11.3333 2.5 10 2.5C8.66667 2.5 8.33333 3.61111 8.33333 4.16667V5.41667M11.6667 5.41667H8.33333" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Ruleset/RulesetSm.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const RulesetSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M6 6H4.95972C4.64894 6 4.49356 6 4.34733 6.03617C4.21768 6.06824 4.09375 6.12113 3.98006 6.19291C3.85184 6.27386 3.74196 6.38705 3.52221 6.61345L2.59543 7.56836C2.37568 7.79476 2.26581 7.90793 2.18724 8.04007C2.11757 8.15716 2.06623 8.28487 2.0351 8.41847C2 8.56909 2 8.72924 2 9.04938V11.9055C2 12.6386 2 13.0052 2.13849 13.2852C2.2603 13.5316 2.45468 13.7318 2.69376 13.8573C2.96555 14 3.32135 14 4.03294 14H11.9671C12.6787 14 13.0344 14 13.3063 13.8573C13.5453 13.7318 13.7397 13.5316 13.8615 13.2852C14 13.0052 14 12.6386 14 11.9055V9.04938C14 8.72924 14 8.56909 13.9649 8.41847C13.9338 8.28487 13.8824 8.15716 13.8128 8.04007C13.7342 7.90793 13.6243 7.79476 13.4046 7.56836L12.4778 6.61345C12.258 6.38705 12.1482 6.27386 12.0199 6.19291C11.9063 6.12113 11.7823 6.06824 11.6527 6.03617C11.5065 6 11.351 6 11.0403 6H10" stroke={color} />
+        <path d="M14 9H12.194C11.7029 9 11.4573 9 11.2725 9.12587C11.0877 9.25167 11.01 9.47167 10.8547 9.91167L10.7923 10.0883C10.637 10.5283 10.5594 10.7483 10.3746 10.8741C10.1897 11 9.94414 11 9.45306 11H6.54696C6.05586 11 5.81031 11 5.62545 10.8741C5.44058 10.7483 5.36294 10.5283 5.20764 10.0883L5.14531 9.91167C4.99 9.47167 4.91236 9.25167 4.72749 9.12587C4.54263 9 4.29708 9 3.80599 9H2" stroke={color} />
+        <path d="M9.33333 4.33333H9.8C9.91047 4.33333 10 4.42287 10 4.53333V6.8C10 6.91047 9.91047 7 9.8 7H6.2C6.08954 7 6 6.91047 6 6.8V4.53333C6 4.42287 6.08954 4.33333 6.2 4.33333H6.66667M9.33333 4.33333V3.33333C9.33333 2.88889 9.06667 2 8 2C6.93333 2 6.66667 2.88889 6.66667 3.33333V4.33333M9.33333 4.33333H6.66667" stroke={color} strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Search/SearchLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SearchLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Search/SearchMd.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SearchMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Search/SearchSm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SearchSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M14 14L11.1 11.1M12.6667 7.33333C12.6667 10.2789 10.2789 12.6667 7.33333 12.6667C4.38781 12.6667 2 10.2789 2 7.33333C2 4.38781 4.38781 2 7.33333 2C10.2789 2 12.6667 4.38781 12.6667 7.33333Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Services/ServicesLg.tsx

@@ -0,0 +1,18 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const ServicesLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_11219_38)">
+            <path d="M9.75 16.5C11.4069 16.5 12.75 15.1569 12.75 13.5C12.75 11.8431 11.4069 10.5 9.75 10.5C8.09315 10.5 6.75 11.8431 6.75 13.5C6.75 15.1569 8.09315 16.5 9.75 16.5Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M5.00531 19.5C5.4308 18.6017 6.10257 17.8426 6.9425 17.3111C7.78243 16.7795 8.756 16.4973 9.75 16.4973C10.744 16.4973 11.7176 16.7795 12.5575 17.3111C13.3974 17.8426 14.0692 18.6017 14.4947 19.5H20.25C20.4489 19.5 20.6397 19.421 20.7803 19.2803C20.921 19.1397 21 18.9489 21 18.75V5.25C21 5.05109 20.921 4.86032 20.7803 4.71967C20.6397 4.57902 20.4489 4.5 20.25 4.5H3.75C3.55109 4.5 3.36032 4.57902 3.21967 4.71967C3.07902 4.86032 3 5.05109 3 5.25V18.75C3 18.9489 3.07902 19.1397 3.21967 19.2803C3.36032 19.421 3.55109 19.5 3.75 19.5H5.00531Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M16.5 16.5H18V7.5H6V9" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_11219_38">
+                <rect width="24" height="24" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Services/ServicesMd.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const ServicesMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8.125 13.75C9.50571 13.75 10.625 12.6307 10.625 11.25C10.625 9.86929 9.50571 8.75 8.125 8.75C6.74429 8.75 5.625 9.86929 5.625 11.25C5.625 12.6307 6.74429 13.75 8.125 13.75Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M4.17109 16.25C4.52567 15.5014 5.08548 14.8688 5.78542 14.4259C6.48536 13.9829 7.29667 13.7478 8.125 13.7478C8.95333 13.7478 9.76464 13.9829 10.4646 14.4259C11.1645 14.8688 11.7243 15.5014 12.0789 16.25H16.875C17.0408 16.25 17.1997 16.1842 17.3169 16.0669C17.4342 15.9497 17.5 15.7908 17.5 15.625V4.375C17.5 4.20924 17.4342 4.05027 17.3169 3.93306C17.1997 3.81585 17.0408 3.75 16.875 3.75H3.125C2.95924 3.75 2.80027 3.81585 2.68306 3.93306C2.56585 4.05027 2.5 4.20924 2.5 4.375V15.625C2.5 15.7908 2.56585 15.9497 2.68306 16.0669C2.80027 16.1842 2.95924 16.25 3.125 16.25H4.17109Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M13.75 13.75H15V6.25H5V7.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Services/ServicesSm.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const ServicesSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M6.5 11C7.60457 11 8.5 10.1046 8.5 9C8.5 7.89543 7.60457 7 6.5 7C5.39543 7 4.5 7.89543 4.5 9C4.5 10.1046 5.39543 11 6.5 11Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M3.33687 13C3.62054 12.4011 4.06838 11.8951 4.62834 11.5407C5.18829 11.1863 5.83734 10.9982 6.5 10.9982C7.16266 10.9982 7.81171 11.1863 8.37167 11.5407C8.93162 11.8951 9.37946 12.4011 9.66313 13H13.5C13.6326 13 13.7598 12.9473 13.8536 12.8536C13.9473 12.7598 14 12.6326 14 12.5V3.5C14 3.36739 13.9473 3.24021 13.8536 3.14645C13.7598 3.05268 13.6326 3 13.5 3H2.5C2.36739 3 2.24021 3.05268 2.14645 3.14645C2.05268 3.24021 2 3.36739 2 3.5V12.5C2 12.6326 2.05268 12.7598 2.14645 12.8536C2.24021 12.9473 2.36739 13 2.5 13H3.33687Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M11 11H12V5H4V6" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/SettingGear/SettinggearLg.tsx

@@ -0,0 +1,10 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SettinggearLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M18.7273 14.7273C18.6063 15.0015 18.5702 15.3056 18.6236 15.6005C18.6771 15.8954 18.8177 16.1676 19.0273 16.3818L19.0818 16.4364C19.2509 16.6052 19.385 16.8057 19.4765 17.0265C19.568 17.2472 19.6151 17.4838 19.6151 17.7227C19.6151 17.9617 19.568 18.1983 19.4765 18.419C19.385 18.6397 19.2509 18.8402 19.0818 19.0091C18.913 19.1781 18.7124 19.3122 18.4917 19.4037C18.271 19.4952 18.0344 19.5423 17.7955 19.5423C17.5565 19.5423 17.3199 19.4952 17.0992 19.4037C16.8785 19.3122 16.678 19.1781 16.5091 19.0091L16.4545 18.9545C16.2403 18.745 15.9682 18.6044 15.6733 18.5509C15.3784 18.4974 15.0742 18.5335 14.8 18.6545C14.5311 18.7698 14.3018 18.9611 14.1403 19.205C13.9788 19.4489 13.8921 19.7347 13.8909 20.0273V20.1818C13.8909 20.664 13.6994 21.1265 13.3584 21.4675C13.0174 21.8084 12.5549 22 12.0727 22C11.5905 22 11.1281 21.8084 10.7871 21.4675C10.4461 21.1265 10.2545 20.664 10.2545 20.1818V20.1C10.2475 19.7991 10.1501 19.5073 9.97501 19.2625C9.79991 19.0176 9.55521 18.8312 9.27273 18.7273C8.99853 18.6063 8.69437 18.5702 8.39947 18.6236C8.10456 18.6771 7.83244 18.8177 7.61818 19.0273L7.56364 19.0818C7.39478 19.2509 7.19425 19.385 6.97353 19.4765C6.7528 19.568 6.51621 19.6151 6.27727 19.6151C6.03834 19.6151 5.80174 19.568 5.58102 19.4765C5.36029 19.385 5.15977 19.2509 4.99091 19.0818C4.82186 18.913 4.68775 18.7124 4.59626 18.4917C4.50476 18.271 4.45766 18.0344 4.45766 17.7955C4.45766 17.5565 4.50476 17.3199 4.59626 17.0992C4.68775 16.8785 4.82186 16.678 4.99091 16.5091L5.04545 16.4545C5.25503 16.2403 5.39562 15.9682 5.4491 15.6733C5.50257 15.3784 5.46647 15.0742 5.34545 14.8C5.23022 14.5311 5.03887 14.3018 4.79497 14.1403C4.55107 13.9788 4.26526 13.8921 3.97273 13.8909H3.81818C3.33597 13.8909 2.87351 13.6994 2.53253 13.3584C2.19156 13.0174 2 12.5549 2 12.0727C2 11.5905 2.19156 11.1281 2.53253 10.7871C2.87351 10.4461 3.33597 10.2545 3.81818 10.2545H3.9C4.2009 10.2475 4.49273 10.1501 4.73754 9.97501C4.98236 9.79991 5.16883 9.55521 5.27273 9.27273C5.39374 8.99853 5.42984 8.69437 5.37637 8.39947C5.3229 8.10456 5.18231 7.83244 4.97273 7.61818L4.91818 7.56364C4.74913 7.39478 4.61503 7.19425 4.52353 6.97353C4.43203 6.7528 4.38493 6.51621 4.38493 6.27727C4.38493 6.03834 4.43203 5.80174 4.52353 5.58102C4.61503 5.36029 4.74913 5.15977 4.91818 4.99091C5.08704 4.82186 5.28757 4.68775 5.50829 4.59626C5.72901 4.50476 5.96561 4.45766 6.20455 4.45766C6.44348 4.45766 6.68008 4.50476 6.9008 4.59626C7.12152 4.68775 7.32205 4.82186 7.49091 4.99091L7.54545 5.04545C7.75971 5.25503 8.03183 5.39562 8.32674 5.4491C8.62164 5.50257 8.9258 5.46647 9.2 5.34545H9.27273C9.54161 5.23022 9.77093 5.03887 9.93245 4.79497C10.094 4.55107 10.1807 4.26526 10.1818 3.97273V3.81818C10.1818 3.33597 10.3734 2.87351 10.7144 2.53253C11.0553 2.19156 11.5178 2 12 2C12.4822 2 12.9447 2.19156 13.2856 2.53253C13.6266 2.87351 13.8182 3.33597 13.8182 3.81818V3.9C13.8193 4.19253 13.906 4.47834 14.0676 4.72224C14.2291 4.96614 14.4584 5.15749 14.7273 5.27273C15.0015 5.39374 15.3056 5.42984 15.6005 5.37637C15.8954 5.3229 16.1676 5.18231 16.3818 4.97273L16.4364 4.91818C16.6052 4.74913 16.8057 4.61503 17.0265 4.52353C17.2472 4.43203 17.4838 4.38493 17.7227 4.38493C17.9617 4.38493 18.1983 4.43203 18.419 4.52353C18.6397 4.61503 18.8402 4.74913 19.0091 4.91818C19.1781 5.08704 19.3122 5.28757 19.4037 5.50829C19.4952 5.72901 19.5423 5.96561 19.5423 6.20455C19.5423 6.44348 19.4952 6.68008 19.4037 6.9008C19.3122 7.12152 19.1781 7.32205 19.0091 7.49091L18.9545 7.54545C18.745 7.75971 18.6044 8.03183 18.5509 8.32674C18.4974 8.62164 18.5335 8.9258 18.6545 9.2V9.27273C18.7698 9.54161 18.9611 9.77093 19.205 9.93245C19.4489 10.094 19.7347 10.1807 20.0273 10.1818H20.1818C20.664 10.1818 21.1265 10.3734 21.4675 10.7144C21.8084 11.0553 22 11.5178 22 12C22 12.4822 21.8084 12.9447 21.4675 13.2856C21.1265 13.6266 20.664 13.8182 20.1818 13.8182H20.1C19.8075 13.8193 19.5217 13.906 19.2778 14.0676C19.0339 14.2291 18.8425 14.4584 18.7273 14.7273Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/SettingGear/SettinggearMd.tsx

@@ -0,0 +1,17 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SettinggearMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_8234_4620)">
+            <path d="M9.99984 12.5C11.3805 12.5 12.4998 11.3807 12.4998 10C12.4998 8.61929 11.3805 7.5 9.99984 7.5C8.61913 7.5 7.49984 8.61929 7.49984 10C7.49984 11.3807 8.61913 12.5 9.99984 12.5Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M15.6059 12.2727C15.5051 12.5012 15.475 12.7547 15.5195 13.0005C15.5641 13.2462 15.6812 13.473 15.8559 13.6515L15.9014 13.697C16.0422 13.8377 16.154 14.0048 16.2302 14.1887C16.3065 14.3727 16.3457 14.5698 16.3457 14.7689C16.3457 14.9681 16.3065 15.1652 16.2302 15.3492C16.154 15.5331 16.0422 15.7002 15.9014 15.8409C15.7606 15.9818 15.5935 16.0935 15.4096 16.1698C15.2257 16.246 15.0285 16.2853 14.8294 16.2853C14.6303 16.2853 14.4331 16.246 14.2492 16.1698C14.0652 16.0935 13.8981 15.9818 13.7574 15.8409L13.712 15.7955C13.5334 15.6208 13.3066 15.5037 13.0609 15.4591C12.8151 15.4145 12.5617 15.4446 12.3332 15.5455C12.1091 15.6415 11.918 15.8009 11.7834 16.0042C11.6488 16.2074 11.5766 16.4456 11.5756 16.6894V16.8182C11.5756 17.22 11.416 17.6054 11.1318 17.8896C10.8477 18.1737 10.4623 18.3333 10.0604 18.3333C9.6586 18.3333 9.27322 18.1737 8.98907 17.8896C8.70492 17.6054 8.54529 17.22 8.54529 16.8182V16.75C8.53943 16.4993 8.45826 16.2561 8.31235 16.0521C8.16643 15.848 7.96252 15.6926 7.72711 15.6061C7.49861 15.5052 7.24515 15.4751 6.99939 15.5197C6.75364 15.5643 6.52687 15.6814 6.34832 15.8561L6.30287 15.9015C6.16215 16.0424 5.99505 16.1541 5.81111 16.2304C5.62717 16.3066 5.43001 16.3459 5.2309 16.3459C5.03178 16.3459 4.83462 16.3066 4.65069 16.2304C4.46675 16.1541 4.29964 16.0424 4.15893 15.9015C4.01805 15.7608 3.9063 15.5937 3.83005 15.4098C3.7538 15.2258 3.71455 15.0287 3.71455 14.8296C3.71455 14.6304 3.7538 14.4333 3.83005 14.2493C3.9063 14.0654 4.01805 13.8983 4.15893 13.7576L4.20438 13.7121C4.37903 13.5336 4.49619 13.3068 4.54075 13.0611C4.58531 12.8153 4.55523 12.5618 4.45438 12.3333C4.35835 12.1093 4.19889 11.9182 3.99564 11.7836C3.79239 11.649 3.55422 11.5767 3.31044 11.5758H3.18166C2.77981 11.5758 2.39443 11.4161 2.11028 11.132C1.82614 10.8478 1.6665 10.4625 1.6665 10.0606C1.6665 9.65877 1.82614 9.27338 2.11028 8.98924C2.39443 8.70509 2.77981 8.54546 3.18166 8.54546H3.24984C3.50059 8.53959 3.74378 8.45843 3.94779 8.31251C4.1518 8.1666 4.3072 7.96268 4.39378 7.72728C4.49462 7.49878 4.5247 7.24531 4.48014 6.99956C4.43558 6.75381 4.31843 6.52703 4.14378 6.34849L4.09832 6.30304C3.95745 6.16232 3.84569 5.99521 3.76944 5.81128C3.69319 5.62734 3.65395 5.43018 3.65395 5.23107C3.65395 5.03195 3.69319 4.83479 3.76944 4.65085C3.84569 4.46692 3.95745 4.29981 4.09832 4.1591C4.23904 4.01822 4.40614 3.90647 4.59008 3.83022C4.77402 3.75397 4.97118 3.71472 5.17029 3.71472C5.36941 3.71472 5.56657 3.75397 5.7505 3.83022C5.93444 3.90647 6.10154 4.01822 6.24226 4.1591L6.28772 4.20455C6.46626 4.3792 6.69303 4.49636 6.93878 4.54092C7.18454 4.58548 7.43801 4.5554 7.6665 4.45455H7.72711C7.95118 4.35852 8.14227 4.19906 8.27688 3.99581C8.41148 3.79256 8.48371 3.55439 8.48469 3.31061V3.18182C8.48469 2.77998 8.64432 2.3946 8.92846 2.11045C9.21261 1.8263 9.59799 1.66667 9.99984 1.66667C10.4017 1.66667 10.7871 1.8263 11.0712 2.11045C11.3554 2.3946 11.515 2.77998 11.515 3.18182V3.25001C11.516 3.49378 11.5882 3.73196 11.7228 3.93521C11.8574 4.13846 12.0485 4.29791 12.2726 4.39394C12.5011 4.49479 12.7545 4.52487 13.0003 4.48031C13.246 4.43575 13.4728 4.31859 13.6514 4.14394L13.6968 4.09849C13.8375 3.95762 14.0046 3.84586 14.1886 3.76961C14.3725 3.69336 14.5697 3.65412 14.7688 3.65412C14.9679 3.65412 15.1651 3.69336 15.349 3.76961C15.5329 3.84586 15.7 3.95762 15.8407 4.09849C15.9816 4.23921 16.0934 4.40631 16.1696 4.59025C16.2459 4.77418 16.2851 4.97135 16.2851 5.17046C16.2851 5.36957 16.2459 5.56674 16.1696 5.75067C16.0934 5.93461 15.9816 6.10171 15.8407 6.24243L15.7953 6.28788C15.6206 6.46643 15.5035 6.6932 15.4589 6.93895C15.4144 7.18471 15.4444 7.43817 15.5453 7.66667V7.72728C15.6413 7.95135 15.8008 8.14244 16.004 8.27705C16.2073 8.41165 16.4455 8.48388 16.6892 8.48485H16.818C17.2199 8.48485 17.6052 8.64449 17.8894 8.92863C18.1735 9.21278 18.3332 9.59816 18.3332 10C18.3332 10.4018 18.1735 10.7872 17.8894 11.0714C17.6052 11.3555 17.2199 11.5152 16.818 11.5152H16.7498C16.5061 11.5161 16.2679 11.5884 16.0646 11.723C15.8614 11.8576 15.7019 12.0487 15.6059 12.2727Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_8234_4620">
+                <rect width="20" height="20" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);