droplinked-editor-configs 1.8.0

package/src/assets/icon/StyleDesigner/Design/DesignMd.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const DesignMd = ({ 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="M14.7286 9.50623L13.1409 14.2694C13.0893 14.4241 12.9655 14.5441 12.809 14.5906L3.07786 17.4836C2.69012 17.5988 2.33311 17.23 2.46103 16.8462L5.62052 7.36774C5.66647 7.22988 5.77012 7.11884 5.90449 7.06351L10.3933 5.21516C10.58 5.13831 10.7945 5.18122 10.9373 5.32395L14.6078 8.99456C14.7417 9.12848 14.7885 9.32656 14.7286 9.50623Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M2.74658 17.168L8.04988 11.8647" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M14.8264 9.2131L17.1835 6.85604C17.8343 6.20517 17.8343 5.14989 17.1835 4.49902L15.4157 2.73125C14.7648 2.08039 13.7096 2.08039 13.0587 2.73125L10.7017 5.08828" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M9.81799 10.0969C9.32983 9.60873 8.53833 9.60873 8.05019 10.0969C7.56204 10.5851 7.56204 11.3766 8.05019 11.8646C8.53833 12.3528 9.32983 12.3528 9.81799 11.8646C10.3061 11.3766 10.3061 10.5851 9.81799 10.0969Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Design/DesignSm.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const DesignSm = ({ 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="M11.783 7.60502L10.5128 11.4156C10.4715 11.5394 10.3725 11.6353 10.2473 11.6725L2.46239 13.9869C2.15219 14.0791 1.86659 13.784 1.96892 13.477L4.49652 5.89423C4.53328 5.78394 4.6162 5.69511 4.72369 5.65085L8.31473 4.17217C8.46407 4.11069 8.63573 4.14501 8.74993 4.25919L11.6863 7.19569C11.7935 7.30282 11.8309 7.46129 11.783 7.60502Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M2.19727 13.7344L6.43991 9.49176" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M11.8613 7.37049L13.747 5.48485C14.2677 4.96415 14.2677 4.11993 13.747 3.59923L12.3328 2.18501C11.8121 1.66432 10.9679 1.66432 10.4471 2.18501L8.56152 4.07063" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M7.8541 8.07751C7.46357 7.68697 6.83037 7.68697 6.43986 8.07751C6.04934 8.46804 6.04934 9.10124 6.43986 9.49171C6.83037 9.88224 7.46357 9.88224 7.8541 9.49171C8.24457 9.10124 8.24457 8.46804 7.8541 8.07751Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/DesktopPC/DesktoppcLg.tsx

@@ -0,0 +1,18 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const DesktoppcLg = ({ 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_8867_389)">
+            <path d="M4.5 17.25L19.5 17.25C20.3284 17.25 21 16.5784 21 15.75V5.25C21 4.42157 20.3284 3.75 19.5 3.75L4.5 3.75C3.67157 3.75 3 4.42157 3 5.25V15.75C3 16.5784 3.67157 17.25 4.5 17.25Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M15 20.25H9" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12 17.25V20.25" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_8867_389">
+                <rect width="24" height="24" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/DesktopPC/DesktoppcMd.tsx

@@ -0,0 +1,18 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const DesktoppcMd = ({ 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_8867_383)">
+            <path d="M3.75 14.375L16.25 14.375C16.9404 14.375 17.5 13.8154 17.5 13.125V4.375C17.5 3.68464 16.9404 3.125 16.25 3.125L3.75 3.125C3.05964 3.125 2.5 3.68464 2.5 4.375L2.5 13.125C2.5 13.8154 3.05964 14.375 3.75 14.375Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12.5 16.875H7.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M10 14.375V16.875" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_8867_383">
+                <rect width="20" height="20" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/DesktopPC/DesktoppcSm.tsx

@@ -0,0 +1,18 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const DesktoppcSm = ({ 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_8867_381)">
+            <path d="M3 11.5L13 11.5C13.5523 11.5 14 11.0523 14 10.5L14 3.5C14 2.94771 13.5523 2.5 13 2.5L3 2.5C2.44771 2.5 2 2.94771 2 3.5L2 10.5C2 11.0523 2.44771 11.5 3 11.5Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M10 13.5H6" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M8 11.5V13.5" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_8867_381">
+                <rect width="16" height="16" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Eraser/EraserLg.tsx

@@ -0,0 +1,10 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const EraserLg = ({ 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="M9 9.75L15 15.75" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M10.4998 20.25L20.5601 10.1897C20.6994 10.0504 20.8099 9.88504 20.8853 9.70303C20.9607 9.52102 20.9995 9.32594 20.9995 9.12892C20.9995 8.93191 20.9607 8.73683 20.8853 8.55482C20.8099 8.37281 20.6994 8.20743 20.5601 8.06814L16.6816 4.1897C16.5424 4.05038 16.377 3.93986 16.195 3.86446C16.013 3.78905 15.8179 3.75024 15.6209 3.75024C15.4239 3.75024 15.2288 3.78905 15.0468 3.86446C14.8648 3.93986 14.6994 4.05038 14.5601 4.1897L3.43946 15.3103C3.30014 15.4496 3.18962 15.615 3.11421 15.797C3.03881 15.979 3 16.1741 3 16.3711C3 16.5681 3.03881 16.7632 3.11421 16.9452C3.18962 17.1272 3.30014 17.2926 3.43946 17.4319L6.25759 20.25H20.2498" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Eraser/EraserMd.tsx

@@ -0,0 +1,10 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const EraserMd = ({ 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.5 8.125L12.5 13.125" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M8.74981 16.875L17.1334 8.4914C17.2495 8.37532 17.3416 8.23751 17.4044 8.08584C17.4673 7.93416 17.4996 7.77159 17.4996 7.60742C17.4996 7.44324 17.4673 7.28067 17.4044 7.129C17.3416 6.97732 17.2495 6.83951 17.1334 6.72343L13.9014 3.4914C13.7853 3.3753 13.6475 3.2832 13.4958 3.22036C13.3441 3.15752 13.1816 3.12518 13.0174 3.12518C12.8532 3.12518 12.6906 3.15752 12.539 3.22036C12.3873 3.2832 12.2495 3.3753 12.1334 3.4914L2.86622 12.7586C2.75011 12.8747 2.65801 13.0125 2.59518 13.1642C2.53234 13.3158 2.5 13.4784 2.5 13.6426C2.5 13.8067 2.53234 13.9693 2.59518 14.121C2.65801 14.2727 2.75011 14.4105 2.86622 14.5266L5.21465 16.875H16.8748" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Eraser/EraserSm.tsx

@@ -0,0 +1,10 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const EraserSm = ({ 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 6.5L10 10.5" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M6.99985 13.5L13.7067 6.7931C13.7996 6.70023 13.8733 6.58999 13.9236 6.46865C13.9738 6.3473 13.9997 6.21725 13.9997 6.08591C13.9997 5.95457 13.9738 5.82451 13.9236 5.70317C13.8733 5.58183 13.7996 5.47158 13.7067 5.37872L11.1211 2.7931C11.0282 2.70021 10.918 2.62653 10.7966 2.57626C10.6753 2.526 10.5453 2.50012 10.4139 2.50012C10.2826 2.50012 10.1525 2.526 10.0312 2.57626C9.90984 2.62653 9.79959 2.70021 9.70672 2.7931L2.29297 10.2068C2.20009 10.2997 2.12641 10.41 2.07614 10.5313C2.02587 10.6526 2 10.7827 2 10.914C2 11.0454 2.02587 11.1754 2.07614 11.2968C2.12641 11.4181 2.20009 11.5284 2.29297 11.6212L4.17172 13.5H13.4998" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/FontSize/FontsizeLg.tsx

@@ -0,0 +1,19 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const FontsizeLg = ({ 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_11142_256)">
+            <path d="M13.5 18L7.5 5.25L1.5 18" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M18.75 18C20.4069 18 21.75 16.8247 21.75 15.375C21.75 13.9253 20.4069 12.75 18.75 12.75C17.0931 12.75 15.75 13.9253 15.75 15.375C15.75 16.8247 17.0931 18 18.75 18Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M21.75 18V12.375C21.75 10.9256 20.4066 9.75 18.75 9.75C17.8537 9.75 17.0494 9.95437 16.5 10.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M11.7359 14.25H3.26465" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_11142_256">
+                <rect width="24" height="24" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/FontSize/FontsizeMd.tsx

@@ -0,0 +1,19 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const FontsizeMd = ({ 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_11142_250)">
+            <path d="M11.25 15L6.25 4.375L1.25 15" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M15.625 15C17.0057 15 18.125 14.0206 18.125 12.8125C18.125 11.6044 17.0057 10.625 15.625 10.625C14.2443 10.625 13.125 11.6044 13.125 12.8125C13.125 14.0206 14.2443 15 15.625 15Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M18.125 15V10.3125C18.125 9.10469 17.0055 8.125 15.625 8.125C14.8781 8.125 14.2078 8.29531 13.75 8.75" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M9.78008 11.875H2.7207" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_11142_250">
+                <rect width="20" height="20" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/FontSize/FontsizeSm.tsx

@@ -0,0 +1,19 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const FontsizeSm = ({ 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_11142_244)">
+            <path d="M9 12L5 3.5L1 12" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12.5 12C13.6046 12 14.5 11.2165 14.5 10.25C14.5 9.2835 13.6046 8.5 12.5 8.5C11.3954 8.5 10.5 9.2835 10.5 10.25C10.5 11.2165 11.3954 12 12.5 12Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M14.5 12V8.25C14.5 7.28375 13.6044 6.5 12.5 6.5C11.9025 6.5 11.3663 6.63625 11 7" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M7.82328 9.5H2.17578" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_11142_244">
+                <rect width="16" height="16" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Footer/FooterLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const FooterLg = ({ 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 15H4M20 15V7.19691C20 6.07899 20 5.5192 19.7822 5.0918C19.5905 4.71547 19.2837 4.40973 18.9074 4.21799C18.4796 4 17.9203 4 16.8002 4H7.2002C6.08009 4 5.51962 4 5.0918 4.21799C4.71547 4.40973 4.40973 4.71547 4.21799 5.0918C4 5.51962 4 6.08009 4 7.2002V15M20 15V16.8031C20 17.921 20 18.48 19.7822 18.9074C19.5905 19.2837 19.2837 19.5905 18.9074 19.7822C18.48 20 17.921 20 16.8031 20H7.19691C6.07899 20 5.5192 20 5.0918 19.7822C4.71547 19.5905 4.40973 19.2837 4.21799 18.9074C4 18.4796 4 17.9203 4 16.8002V15" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Footer/FooterMd.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const FooterMd = ({ 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="M16.6663 12.5H3.33301M16.6663 12.5V5.9974C16.6663 5.06581 16.6663 4.59931 16.4849 4.24314C16.3251 3.92954 16.0694 3.67476 15.7558 3.51497C15.3993 3.33331 14.9333 3.33331 13.9998 3.33331H5.99984C5.06642 3.33331 4.59936 3.33331 4.24284 3.51497C3.92924 3.67476 3.67445 3.92954 3.51466 4.24314C3.33301 4.59966 3.33301 5.06672 3.33301 6.00014V12.5M16.6663 12.5V14.0026C16.6663 14.9341 16.6663 15.4 16.4849 15.7561C16.3251 16.0697 16.0694 16.3254 15.7558 16.4852C15.3997 16.6666 14.9338 16.6666 14.0022 16.6666H5.9971C5.0655 16.6666 4.59901 16.6666 4.24284 16.4852C3.92924 16.3254 3.67445 16.0697 3.51466 15.7561C3.33301 15.3996 3.33301 14.9336 3.33301 14.0001V12.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Footer/FooterSm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const FooterSm = ({ 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.3337 10H2.66699M13.3337 10V4.79796C13.3337 4.05268 13.3337 3.67949 13.1885 3.39455C13.0606 3.14367 12.8561 2.93984 12.6053 2.81201C12.32 2.66669 11.9472 2.66669 11.2005 2.66669H4.80046C4.05372 2.66669 3.68007 2.66669 3.39486 2.81201C3.14397 2.93984 2.94015 3.14367 2.81232 3.39455C2.66699 3.67977 2.66699 4.05341 2.66699 4.80015V10M13.3337 10V11.2021C13.3337 11.9474 13.3337 12.32 13.1885 12.605C13.0606 12.8558 12.8561 13.0603 12.6053 13.1882C12.3203 13.3334 11.9477 13.3334 11.2024 13.3334H4.79827C4.05299 13.3334 3.67979 13.3334 3.39486 13.1882C3.14397 13.0603 2.94015 12.8558 2.81232 12.605C2.66699 12.3197 2.66699 11.9469 2.66699 11.2002V10" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Header/HeaderLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const HeaderLg = ({ 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="M4 9H20M4 9V16.8002C4 17.9203 4 18.4796 4.21799 18.9074C4.40973 19.2837 4.71547 19.5905 5.0918 19.7822C5.5192 20 6.07901 20 7.19692 20H16.8031C17.921 20 18.48 20 18.9074 19.7822C19.2837 19.5905 19.5905 19.2837 19.7822 18.9074C20 18.48 20 17.921 20 16.8031V9M4 9V7.2002C4 6.08009 4 5.51962 4.21799 5.0918C4.40973 4.71547 4.71547 4.40973 5.0918 4.21799C5.51962 4 6.08009 4 7.2002 4H16.8002C17.9203 4 18.4796 4 18.9074 4.21799C19.2837 4.40973 19.5905 4.71547 19.7822 5.0918C20 5.5192 20 6.07899 20 7.19691V9" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Header/HeaderMd.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const HeaderMd = ({ 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="M3.33301 7.49998H16.6663M3.33301 7.49998V14.0001C3.33301 14.9336 3.33301 15.3996 3.51466 15.7561C3.67445 16.0697 3.92924 16.3254 4.24284 16.4852C4.59901 16.6666 5.06551 16.6666 5.99711 16.6666H14.0023C14.9338 16.6666 15.3997 16.6666 15.7558 16.4852C16.0694 16.3254 16.3251 16.0697 16.4849 15.7561C16.6663 15.4 16.6663 14.9341 16.6663 14.0025V7.49998M3.33301 7.49998V6.00014C3.33301 5.06672 3.33301 4.59966 3.51466 4.24314C3.67445 3.92954 3.92924 3.67476 4.24284 3.51497C4.59936 3.33331 5.06642 3.33331 5.99984 3.33331H13.9998C14.9333 3.33331 15.3993 3.33331 15.7558 3.51497C16.0694 3.67476 16.3251 3.92954 16.4849 4.24314C16.6663 4.59931 16.6663 5.06581 16.6663 5.9974V7.49998" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Header/HeaderSm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const HeaderSm = ({ 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="M2.66699 6.00002H13.3337M2.66699 6.00002V11.2002C2.66699 11.9469 2.66699 12.3197 2.81232 12.605C2.94015 12.8558 3.14397 13.0603 3.39486 13.1882C3.67979 13.3334 4.053 13.3334 4.79827 13.3334H11.2024C11.9477 13.3334 12.3203 13.3334 12.6053 13.1882C12.8561 13.0603 13.0606 12.8558 13.1885 12.605C13.3337 12.32 13.3337 11.9473 13.3337 11.2021V6.00002M2.66699 6.00002V4.80015C2.66699 4.05341 2.66699 3.67977 2.81232 3.39455C2.94015 3.14367 3.14397 2.93984 3.39486 2.81201C3.68007 2.66669 4.05372 2.66669 4.80046 2.66669H11.2005C11.9472 2.66669 12.32 2.66669 12.6053 2.81201C12.8561 2.93984 13.0606 3.14367 13.1885 3.39455C13.3337 3.67949 13.3337 4.05268 13.3337 4.79796V6.00002" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Heading/HeadingLg.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const HeadingLg = ({ 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="M4 12H12" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M4 18V6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M12 18V6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M17 12L20 10V18" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Heading/HeadingMd.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const HeadingMd = ({ 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="M3.3335 10H10.0002" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M3.3335 15V5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M10 15V5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M14.1665 10L16.6665 8.33337V15" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Heading/HeadingSm.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const HeadingSm = ({ 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="M2.6665 8H7.99984" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M2.6665 12V4" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M8 12V4" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M11.3335 7.99996L13.3335 6.66663V12" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Italic/ItalicLg.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const ItalicLg = ({ 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="M10.5 20L13.5 4" stroke={color} strokeWidth="2" strokeLinecap="round" />
+        <path d="M9 4H17" stroke={color} strokeWidth="2" strokeLinecap="round" />
+        <path d="M7 20H15" stroke={color} strokeWidth="2" strokeLinecap="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Italic/ItalicMd.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const ItalicMd = ({ 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.75 16.6666L11.25 3.33331" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
+        <path d="M7.5 3.33331H14.1667" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
+        <path d="M5.83301 16.6667H12.4997" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Italic/ItalicSm.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const ItalicSm = ({ 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="M7 13.3334L9 2.66669" stroke={color} strokeLinecap="round" />
+        <path d="M6 2.66669H11.3333" stroke={color} strokeLinecap="round" />
+        <path d="M4.66699 13.3333H10.0003" stroke={color} strokeLinecap="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Layout1/Layout1Lg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const Layout1Lg = ({ 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="M3 15H21M3 19H13M21 7H13M21 11H13M4.6 11H7.4C7.96005 11 8.24008 11 8.45399 10.891C8.64215 10.7951 8.79513 10.6422 8.89101 10.454C9 10.2401 9 9.96005 9 9.4V6.6C9 6.03995 9 5.75992 8.89101 5.54601C8.79513 5.35785 8.64215 5.20487 8.45399 5.10899C8.24008 5 7.96005 5 7.4 5H4.6C4.03995 5 3.75992 5 3.54601 5.10899C3.35785 5.20487 3.20487 5.35785 3.10899 5.54601C3 5.75992 3 6.03995 3 6.6V9.4C3 9.96005 3 10.2401 3.10899 10.454C3.20487 10.6422 3.35785 10.7951 3.54601 10.891C3.75992 11 4.03995 11 4.6 11Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Layout1/Layout1Md.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const Layout1Md = ({ 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="M2.5 12.5H17.5M2.5 15.8334H10.8333M17.5 5.83335H10.8333M17.5 9.16669H10.8333M3.83333 9.16669H6.16667C6.63337 9.16669 6.86673 9.16669 7.04499 9.07585C7.20179 8.99594 7.32928 8.86852 7.40918 8.71169C7.5 8.53344 7.5 8.30006 7.5 7.83335V5.50002C7.5 5.03331 7.5 4.79995 7.40918 4.6217C7.32928 4.4649 7.20179 4.33741 7.04499 4.25751C6.86673 4.16669 6.63337 4.16669 6.16667 4.16669H3.83333C3.36662 4.16669 3.13327 4.16669 2.95501 4.25751C2.79821 4.33741 2.67072 4.4649 2.59082 4.6217C2.5 4.79995 2.5 5.03331 2.5 5.50002V7.83335C2.5 8.30006 2.5 8.53344 2.59082 8.71169C2.67072 8.86852 2.79821 8.99594 2.95501 9.07585C3.13327 9.16669 3.36662 9.16669 3.83333 9.16669Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Layout1/Layout1Sm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const Layout1Sm = ({ 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="M2 9.99998H14M2 12.6666H8.66667M14 4.66665H8.66667M14 7.33331H8.66667M3.06667 7.33331H4.93333C5.3067 7.33331 5.49339 7.33331 5.63599 7.26065C5.76143 7.19671 5.86342 7.09478 5.92734 6.96931C6 6.82671 6 6.64001 6 6.26665V4.39998C6 4.02661 6 3.83993 5.92734 3.69732C5.86342 3.57188 5.76143 3.46989 5.63599 3.40597C5.49339 3.33331 5.3067 3.33331 4.93333 3.33331H3.06667C2.6933 3.33331 2.50661 3.33331 2.36401 3.40597C2.23857 3.46989 2.13658 3.57188 2.07266 3.69732C2 3.83993 2 4.02661 2 4.39998V6.26665C2 6.64001 2 6.82671 2.07266 6.96931C2.13658 7.09478 2.23857 7.19671 2.36401 7.26065C2.50661 7.33331 2.6933 7.33331 3.06667 7.33331Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Layout2/Layout2Lg.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const Layout2Lg = ({ 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="M9.75 9.75V19.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M3 9.75H21" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M20.25 4.5H3.75C3.33579 4.5 3 4.83579 3 5.25V18.75C3 19.1642 3.33579 19.5 3.75 19.5H20.25C20.6642 19.5 21 19.1642 21 18.75V5.25C21 4.83579 20.6642 4.5 20.25 4.5Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Layout2/Layout2Md.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const Layout2Md = ({ 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 8.125V16.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M2.5 8.125H17.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M16.875 3.75H3.125C2.77982 3.75 2.5 4.02982 2.5 4.375V15.625C2.5 15.9702 2.77982 16.25 3.125 16.25H16.875C17.2202 16.25 17.5 15.9702 17.5 15.625V4.375C17.5 4.02982 17.2202 3.75 16.875 3.75Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Layout2/Layout2Sm.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const Layout2Sm = ({ 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 6.5V13" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M2 6.5H14" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M13.5 3H2.5C2.22386 3 2 3.22386 2 3.5V12.5C2 12.7761 2.22386 13 2.5 13H13.5C13.7761 13 14 12.7761 14 12.5V3.5C14 3.22386 13.7761 3 13.5 3Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/MagicWand/MagicwandLg.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const MagicwandLg = ({ 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="M13.9996 7.00003L16.828 9.82846M19.5162 3.74615L20.0819 4.31183C20.4779 4.70785 20.6759 4.90586 20.7501 5.13419C20.8154 5.33503 20.8154 5.55138 20.7501 5.75222C20.6759 5.98055 20.4779 6.17856 20.0819 6.57457L6.52508 20.1314C6.12906 20.5274 5.93105 20.7254 5.70272 20.7996C5.50188 20.8649 5.28553 20.8649 5.08469 20.7996C4.85636 20.7254 4.65835 20.5274 4.26234 20.1314L3.69665 19.5657C3.30063 19.1697 3.10262 18.9717 3.02844 18.7433C2.96318 18.5425 2.96318 18.3262 3.02844 18.1253C3.10262 17.897 3.30063 17.699 3.69665 17.303L17.2535 3.74615C17.6495 3.35013 17.8475 3.15212 18.0758 3.07793C18.2767 3.01268 18.493 3.01268 18.6939 3.07793C18.9222 3.15212 19.1202 3.35013 19.5162 3.74615Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M7.5 2L6.975 3.33115C6.90789 3.50131 6.87434 3.58639 6.82295 3.65814C6.77741 3.72173 6.72173 3.77741 6.65814 3.82296C6.58639 3.87432 6.50131 3.90789 6.33115 3.975L5 4.5L6.33115 5.025C6.50131 5.09211 6.58639 5.12568 6.65814 5.17704C6.72173 5.22261 6.77741 5.27829 6.82295 5.34186C6.87434 5.41361 6.90789 5.49868 6.975 5.66886L7.5 7L8.025 5.66886C8.09211 5.49868 8.12568 5.41361 8.17704 5.34186C8.22261 5.27829 8.27829 5.22261 8.34186 5.17704C8.41361 5.12568 8.49868 5.09211 8.66886 5.025L10 4.5L8.66886 3.975C8.49868 3.90789 8.41361 3.87432 8.34186 3.82296C8.27829 3.77741 8.22261 3.72173 8.17704 3.65814C8.12568 3.58639 8.09211 3.50131 8.025 3.33115L7.5 2Z" stroke={color} strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M14 1L13.79 1.53246C13.7632 1.60052 13.7497 1.63456 13.7292 1.66325C13.711 1.68869 13.6887 1.71096 13.6633 1.72919C13.6346 1.74973 13.6005 1.76316 13.5325 1.79L13 2L13.5325 2.21C13.6005 2.23684 13.6346 2.25027 13.6633 2.27081C13.6887 2.28904 13.711 2.31131 13.7292 2.33674C13.7497 2.36544 13.7632 2.39947 13.79 2.46754L14 3L14.21 2.46754C14.2368 2.39947 14.2503 2.36544 14.2708 2.33674C14.289 2.31131 14.3113 2.28904 14.3367 2.27081C14.3654 2.25027 14.3995 2.23684 14.4675 2.21L15 2L14.4675 1.79C14.3995 1.76316 14.3654 1.74973 14.3367 1.72919C14.3113 1.71096 14.289 1.68869 14.2708 1.66325C14.2503 1.63456 14.2368 1.60052 14.21 1.53246L14 1Z" stroke={color} strokeWidth="0.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M15.5 16L15.185 16.7987C15.1447 16.9008 15.1246 16.9518 15.0938 16.9949C15.0664 17.033 15.033 17.0664 14.9949 17.0938C14.9518 17.1246 14.9008 17.1447 14.7987 17.185L14 17.5L14.7987 17.815C14.9008 17.8553 14.9518 17.8754 14.9949 17.9062C15.033 17.9336 15.0664 17.967 15.0938 18.0051C15.1246 18.0482 15.1447 18.0992 15.185 18.2013L15.5 19L15.815 18.2013C15.8553 18.0992 15.8754 18.0482 15.9062 18.0051C15.9336 17.967 15.967 17.9336 16.0051 17.9062C16.0482 17.8754 16.0992 17.8553 16.2013 17.815L17 17.5L16.2013 17.185C16.0992 17.1447 16.0482 17.1246 16.0051 17.0938C15.967 17.0664 15.9336 17.033 15.9062 16.9949C15.8754 16.9518 15.8553 16.9008 15.815 16.7987L15.5 16Z" stroke={color} strokeWidth="0.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/MagicWand/MagicwandMd.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const MagicwandMd = ({ 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="M11.6668 5.83331L14.0238 8.19033M16.264 3.12174L16.7354 3.59314C17.0654 3.92316 17.2304 4.08817 17.2922 4.27844C17.3467 4.44581 17.3467 4.6261 17.2922 4.79347C17.2304 4.98374 17.0654 5.14875 16.7354 5.47876L5.43805 16.7761C5.10804 17.1061 4.94303 17.2711 4.75275 17.333C4.58539 17.3874 4.40509 17.3874 4.23773 17.333C4.04745 17.2711 3.88244 17.1061 3.55244 16.7761L3.08103 16.3047C2.75101 15.9747 2.586 15.8097 2.52419 15.6194C2.4698 15.4521 2.4698 15.2718 2.52419 15.1044C2.586 14.9141 2.75101 14.7491 3.08103 14.4191L14.3784 3.12174C14.7084 2.79172 14.8734 2.62672 15.0637 2.56489C15.2311 2.51052 15.4113 2.51052 15.5787 2.56489C15.769 2.62672 15.934 2.79172 16.264 3.12174Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M6.25033 1.66669L5.81283 2.77598C5.7569 2.91778 5.72894 2.98868 5.68612 3.04847C5.64817 3.10146 5.60177 3.14786 5.54877 3.18582C5.48899 3.22862 5.41808 3.2566 5.27628 3.31252L4.16699 3.75002L5.27628 4.18752C5.41808 4.24344 5.48899 4.27142 5.54877 4.31422C5.60177 4.35219 5.64817 4.39859 5.68612 4.45157C5.72894 4.51136 5.7569 4.58225 5.81283 4.72407L6.25033 5.83335L6.68783 4.72407C6.74375 4.58225 6.77172 4.51136 6.81452 4.45157C6.8525 4.39859 6.8989 4.35219 6.95187 4.31422C7.01166 4.27142 7.08256 4.24344 7.22437 4.18752L8.33366 3.75002L7.22437 3.31252C7.08256 3.2566 7.01166 3.22862 6.95187 3.18582C6.8989 3.14786 6.8525 3.10146 6.81452 3.04847C6.77172 2.98868 6.74375 2.91778 6.68783 2.77598L6.25033 1.66669Z" stroke={color} strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M11.6663 0.833313L11.4913 1.27703C11.469 1.33375 11.4578 1.36211 11.4407 1.38602C11.4255 1.40722 11.4069 1.42578 11.3857 1.44097C11.3618 1.45809 11.3334 1.46928 11.2767 1.49165L10.833 1.66665L11.2767 1.84165C11.3334 1.86402 11.3618 1.87521 11.3857 1.89232C11.4069 1.90752 11.4255 1.92607 11.4407 1.94727C11.4578 1.97118 11.469 1.99954 11.4913 2.05627L11.6663 2.49998L11.8413 2.05627C11.8637 1.99954 11.8749 1.97118 11.892 1.94727C11.9072 1.92607 11.9258 1.90752 11.947 1.89232C11.9709 1.87521 11.9992 1.86402 12.056 1.84165L12.4997 1.66665L12.056 1.49165C11.9992 1.46928 11.9709 1.45809 11.947 1.44097C11.9258 1.42578 11.9072 1.40722 11.892 1.38602C11.8749 1.36211 11.8637 1.33375 11.8413 1.27703L11.6663 0.833313Z" stroke={color} strokeWidth="0.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M12.917 13.3333L12.6545 13.9989C12.6209 14.084 12.6042 14.1265 12.5785 14.1624C12.5557 14.1942 12.5279 14.222 12.4961 14.2448C12.4602 14.2705 12.4176 14.2873 12.3326 14.3208L11.667 14.5833L12.3326 14.8458C12.4176 14.8794 12.4602 14.8962 12.4961 14.9218C12.5279 14.9446 12.5557 14.9725 12.5785 15.0042C12.6042 15.0401 12.6209 15.0827 12.6545 15.1677L12.917 15.8333L13.1795 15.1677C13.213 15.0827 13.2298 15.0401 13.2555 15.0042C13.2783 14.9725 13.3061 14.9446 13.3379 14.9218C13.3738 14.8962 13.4163 14.8794 13.5014 14.8458L14.167 14.5833L13.5014 14.3208C13.4163 14.2873 13.3738 14.2705 13.3379 14.2448C13.3061 14.222 13.2783 14.1942 13.2555 14.1624C13.2298 14.1265 13.213 14.084 13.1795 13.9989L12.917 13.3333Z" stroke={color} strokeWidth="0.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/MagicWand/MagicwandSm.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const MagicwandSm = ({ 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="M9.33306 4.66665L11.2187 6.55227M13.0108 2.49739L13.3879 2.87451C13.6519 3.13853 13.7839 3.27053 13.8334 3.42275C13.8769 3.55665 13.8769 3.70088 13.8334 3.83477C13.7839 3.98699 13.6519 4.119 13.3879 4.38301L4.35005 13.4209C4.08604 13.6849 3.95403 13.8169 3.80181 13.8664C3.66792 13.9099 3.52368 13.9099 3.38979 13.8664C3.23757 13.8169 3.10556 13.6849 2.84156 13.4209L2.46443 13.0438C2.20042 12.7798 2.06841 12.6478 2.01896 12.4955C1.97545 12.3616 1.97545 12.2174 2.01896 12.0835C2.06841 11.9313 2.20042 11.7993 2.46443 11.5353L11.5023 2.49739C11.7663 2.23338 11.8983 2.10137 12.0505 2.05191C12.1845 2.00841 12.3287 2.00841 12.4626 2.05191C12.6148 2.10137 12.7468 2.23338 13.0108 2.49739Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M4.99967 1.33331L4.64968 2.22074C4.60494 2.33419 4.58256 2.39091 4.54831 2.43874C4.51795 2.48113 4.48083 2.51825 4.43843 2.54862C4.3906 2.58286 4.33388 2.60524 4.22044 2.64998L3.33301 2.99998L4.22044 3.34998C4.33388 3.39472 4.3906 3.4171 4.43843 3.45134C4.48083 3.48172 4.51795 3.51884 4.54831 3.56122C4.58256 3.60905 4.60494 3.66577 4.64968 3.77922L4.99967 4.66665L5.34967 3.77922C5.39441 3.66577 5.41679 3.60905 5.45103 3.56122C5.48141 3.51884 5.51853 3.48172 5.56091 3.45134C5.60875 3.4171 5.66546 3.39472 5.77891 3.34998L6.66634 2.99998L5.77891 2.64998C5.66546 2.60524 5.60875 2.58286 5.56091 2.54862C5.51853 2.51825 5.48141 2.48113 5.45103 2.43874C5.41679 2.39091 5.39441 2.33419 5.34967 2.22074L4.99967 1.33331Z" stroke={color} strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M9.33366 0.666687L9.19366 1.02166C9.17576 1.06704 9.16682 1.08973 9.15311 1.10886C9.14097 1.12581 9.12612 1.14066 9.10916 1.15281C9.09003 1.16651 9.06734 1.17546 9.02196 1.19335L8.66699 1.33335L9.02196 1.47335C9.06734 1.49125 9.09003 1.5002 9.10916 1.5139C9.12612 1.52605 9.14097 1.5409 9.15311 1.55785C9.16682 1.57698 9.17576 1.59967 9.19366 1.64505L9.33366 2.00002L9.47366 1.64505C9.49155 1.59967 9.50051 1.57698 9.5142 1.55785C9.52635 1.5409 9.5412 1.52605 9.55815 1.5139C9.57729 1.5002 9.59997 1.49125 9.64535 1.47335L10.0003 1.33335L9.64535 1.19335C9.59997 1.17546 9.57729 1.16651 9.55815 1.15281C9.5412 1.14066 9.52635 1.12581 9.5142 1.10886C9.50051 1.08973 9.49155 1.06704 9.47366 1.02166L9.33366 0.666687Z" stroke={color} strokeWidth="0.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M10.333 10.6667L10.123 11.1991C10.0962 11.2672 10.0827 11.3012 10.0622 11.3299C10.044 11.3554 10.0217 11.3777 9.99626 11.3959C9.96756 11.4164 9.93353 11.4298 9.86547 11.4567L9.33301 11.6667L9.86547 11.8767C9.93353 11.9035 9.96756 11.917 9.99626 11.9375C10.0217 11.9557 10.044 11.978 10.0622 12.0034C10.0827 12.0321 10.0962 12.0662 10.123 12.1342L10.333 12.6667L10.543 12.1342C10.5699 12.0662 10.5833 12.0321 10.6038 12.0034C10.6221 11.978 10.6443 11.9557 10.6698 11.9375C10.6985 11.917 10.7325 11.9035 10.8006 11.8767L11.333 11.6667L10.8006 11.4567C10.7325 11.4298 10.6985 11.4164 10.6698 11.3959C10.6443 11.3777 10.6221 11.3554 10.6038 11.3299C10.5833 11.3012 10.5699 11.2672 10.543 11.1991L10.333 10.6667Z" stroke={color} strokeWidth="0.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Mobile/MobileLg.tsx

@@ -0,0 +1,8 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const MobileLg = ({ 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 18H12.0088M11.125 6H12.875M9.55 21H14.45C15.4301 21 15.9202 21 16.2945 20.782C16.6238 20.5903 16.8915 20.2843 17.0592 19.908C17.25 19.4802 17.25 18.9201 17.25 17.8V6.2C17.25 5.0799 17.25 4.51984 17.0592 4.09202C16.8915 3.71569 16.6238 3.40973 16.2945 3.21799C15.9202 3 15.4301 3 14.45 3H9.55C8.56991 3 8.07986 3 7.70552 3.21799C7.37623 3.40973 7.10851 3.71569 6.94074 4.09202C6.75 4.51984 6.75 5.07989 6.75 6.2V17.8C6.75 18.9201 6.75 19.4802 6.94074 19.908C7.10851 20.2843 7.37623 20.5903 7.70552 20.782C8.07986 21 8.5699 21 9.55 21Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+);

package/src/assets/icon/StyleDesigner/Mobile/MobileMd.tsx

@@ -0,0 +1,8 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const MobileMd = ({ 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 15H10.0073M9.27083 5H10.7292M7.95833 17.5H12.0417C12.8584 17.5 13.2668 17.5 13.5788 17.3183C13.8531 17.1586 14.0763 16.9036 14.216 16.59C14.375 16.2335 14.375 15.7667 14.375 14.8333V5.16667C14.375 4.23325 14.375 3.76653 14.216 3.41002C14.0763 3.09641 13.8531 2.84144 13.5788 2.68166C13.2668 2.5 12.8584 2.5 12.0417 2.5H7.95833C7.14159 2.5 6.73322 2.5 6.42126 2.68166C6.14686 2.84144 5.92376 3.09641 5.78395 3.41002C5.625 3.76653 5.625 4.23324 5.625 5.16667V14.8333C5.625 15.7667 5.625 16.2335 5.78395 16.59C5.92376 16.9036 6.14686 17.1586 6.42126 17.3183C6.73322 17.5 7.14159 17.5 7.95833 17.5Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+);

package/src/assets/icon/StyleDesigner/Mobile/MobileSm.tsx

@@ -0,0 +1,8 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const MobileSm = ({ 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 12H8.00583M7.41667 4H8.58333M6.36667 14H9.63333C10.2867 14 10.6135 14 10.863 13.8547C11.0825 13.7269 11.261 13.5229 11.3728 13.272C11.5 12.9868 11.5 12.6134 11.5 11.8667V4.13333C11.5 3.3866 11.5 3.01323 11.3728 2.72801C11.261 2.47713 11.0825 2.27315 10.863 2.14533C10.6135 2 10.2867 2 9.63333 2H6.36667C5.71327 2 5.38657 2 5.13701 2.14533C4.91749 2.27315 4.73901 2.47713 4.62716 2.72801C4.5 3.01323 4.5 3.38659 4.5 4.13333V11.8667C4.5 12.6134 4.5 12.9868 4.62716 13.272C4.73901 13.5229 4.91749 13.7269 5.13701 13.8547C5.38657 14 5.71327 14 6.36667 14Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+);

package/src/assets/icon/StyleDesigner/Paragraph/ParagraphLg.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const ParagraphLg = ({ 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="M17.25 4.5V19.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M13.5 4.5V19.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M13.5 15H9C7.60761 15 6.27226 14.4469 5.28769 13.4623C4.30312 12.4777 3.75 11.1424 3.75 9.75C3.75 8.35761 4.30312 7.02226 5.28769 6.03769C6.27226 5.05312 7.60761 4.5 9 4.5H19.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Paragraph/ParagraphMd.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const ParagraphMd = ({ 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="M14.375 3.75V16.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M11.25 3.75V16.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M11.25 12.5H7.5C6.33968 12.5 5.22688 12.0391 4.40641 11.2186C3.58594 10.3981 3.125 9.28532 3.125 8.125C3.125 6.96468 3.58594 5.85188 4.40641 5.03141C5.22688 4.21094 6.33968 3.75 7.5 3.75H16.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Paragraph/ParagraphSm.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const ParagraphSm = ({ 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="M11.5 3V13" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M9 3V13" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M9 10H6C5.07174 10 4.1815 9.63125 3.52513 8.97487C2.86875 8.3185 2.5 7.42826 2.5 6.5C2.5 5.57174 2.86875 4.6815 3.52513 4.02513C4.1815 3.36875 5.07174 3 6 3H13" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Quote/QuoteLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const QuoteLg = ({ 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 17C17.6569 17 19 15.6569 19 14V12.0001M19 12.0001V8.59847C19 8.03951 19 7.7596 18.8911 7.5459C18.7952 7.35774 18.6419 7.20487 18.4537 7.10899C18.2398 7 17.9602 7 17.4001 7H15.6001C15.04 7 14.7598 7 14.5459 7.10899C14.3577 7.20487 14.2049 7.35774 14.109 7.5459C14 7.75981 14 8.04005 14 8.6001V10.4001C14 10.9602 14 11.2398 14.109 11.4537C14.2049 11.6419 14.3577 11.7952 14.5459 11.8911C14.7596 12 15.0395 12 15.5985 12L19 12.0001ZM7 17C8.65685 17 10 15.6569 10 14L10 12.0001M10 12.0001V8.59846C10 8.0395 10 7.7596 9.89111 7.5459C9.79524 7.35774 9.64186 7.20487 9.4537 7.10899C9.23979 7 8.96015 7 8.4001 7H6.6001C6.04005 7 5.75981 7 5.5459 7.10899C5.35774 7.20487 5.20487 7.35774 5.10899 7.5459C5 7.75981 5 8.04005 5 8.6001V10.4001C5 10.9602 5 11.2398 5.10899 11.4537C5.20487 11.6419 5.35774 11.7952 5.5459 11.8911C5.7596 12 6.0395 12 6.59845 12L10 12.0001Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Quote/QuoteMd.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const QuoteMd = ({ 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.3332 14.1667C14.7139 14.1667 15.8332 13.0474 15.8332 11.6667V10.0001M15.8332 10.0001V7.16543C15.8332 6.69963 15.8332 6.46638 15.7424 6.28829C15.6625 6.13149 15.5347 6.0041 15.3779 5.9242C15.1997 5.83337 14.9666 5.83337 14.4999 5.83337H12.9999C12.5332 5.83337 12.2997 5.83337 12.1214 5.9242C11.9646 6.0041 11.8372 6.13149 11.7573 6.28829C11.6665 6.46655 11.6665 6.70008 11.6665 7.16679V8.66679C11.6665 9.1335 11.6665 9.36653 11.7573 9.54479C11.8372 9.70159 11.9646 9.82941 12.1214 9.9093C12.2995 10 12.5328 10 12.9985 10L15.8332 10.0001ZM5.83317 14.1667C7.21388 14.1667 8.33317 13.0474 8.33317 11.6667L8.33317 10.0001M8.33317 10.0001V7.16542C8.33317 6.69963 8.33317 6.46637 8.24243 6.28829C8.16254 6.13149 8.03472 6.0041 7.87792 5.9242C7.69966 5.83337 7.46663 5.83337 6.99992 5.83337H5.49992C5.03321 5.83337 4.79968 5.83337 4.62142 5.9242C4.46462 6.0041 4.33723 6.13149 4.25733 6.28829C4.1665 6.46655 4.1665 6.70008 4.1665 7.16679V8.66679C4.1665 9.1335 4.1665 9.36653 4.25733 9.54479C4.33723 9.70159 4.46462 9.82941 4.62142 9.9093C4.7995 10 5.03275 10 5.49855 10L8.33317 10.0001Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/StyleDesigner/Quote/QuoteSm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const QuoteSm = ({ 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.6668 11.3333C11.7714 11.3333 12.6668 10.4379 12.6668 9.33329V8.00002M12.6668 8.00002V5.73227C12.6668 5.35963 12.6668 5.17303 12.5942 5.03056C12.5303 4.90512 12.4281 4.8032 12.3026 4.73929C12.16 4.66663 11.9736 4.66663 11.6002 4.66663H10.4002C10.0269 4.66663 9.84004 4.66663 9.69743 4.73929C9.57199 4.8032 9.47007 4.90512 9.40616 5.03056C9.3335 5.17317 9.3335 5.35999 9.3335 5.73336V6.93336C9.3335 7.30673 9.3335 7.49315 9.40616 7.63576C9.47007 7.7612 9.57199 7.86345 9.69743 7.92737C9.8399 7.99996 10.0265 7.99996 10.3991 7.99996L12.6668 8.00002ZM4.66683 11.3333C5.7714 11.3333 6.66683 10.4379 6.66683 9.33329L6.66683 8.00002M6.66683 8.00002V5.73226C6.66683 5.35963 6.66683 5.17303 6.59424 5.03056C6.53032 4.90512 6.42807 4.8032 6.30263 4.73929C6.16002 4.66663 5.9736 4.66663 5.60023 4.66663H4.40023C4.02686 4.66663 3.84004 4.66663 3.69743 4.73929C3.57199 4.8032 3.47007 4.90512 3.40616 5.03056C3.3335 5.17317 3.3335 5.35999 3.3335 5.73336V6.93336C3.3335 7.30673 3.3335 7.49315 3.40616 7.63576C3.47007 7.7612 3.57199 7.86345 3.69743 7.92737C3.8399 7.99996 4.02649 7.99996 4.39913 7.99996L6.66683 8.00002Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);