change icon

src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx

@@ -1,14 +1,14 @@
-import { type FC } from "react";
-import { ArrowLeft, Magicpen, Minus } from "iconsax-react";
-import CustomShapeInstruction from "./CustomShapeInstruction";
-import SquareIcon from "@/assets/icons/square.svg";
 import CircleIcon from "@/assets/icons/circle.svg";
-import TriangleIcon from "@/assets/icons/triangle.svg";
+import SquareIcon from "@/assets/icons/square.svg";
 import StarIcon from "@/assets/icons/Star.svg";
+import TriangleIcon from "@/assets/icons/triangle.svg";
 import { Switch } from "@/components/ui/switch";
 import { clx } from "@/helpers/utils";
 import { useEditorStore } from "@/pages/editor/store/editorStore";
 import { useShapeStore, type ShapeType } from "@/pages/editor/store/shapeStore";
+import { ArrowLeft, Minus, PenTool } from "iconsax-react";
+import { type FC } from "react";
+import CustomShapeInstruction from "./CustomShapeInstruction";
 
 const shapeOptions: Array<{ id: ShapeType; label: string; icon: string; alt: string }> = [
   { id: "square", label: "مربع", icon: SquareIcon, alt: "square" },
@@ -20,7 +20,7 @@ const shapeOptions: Array<{ id: ShapeType; label: string; icon: string; alt: str
 const drawOptions = [
   { tool: "line" as const, label: "خط", Icon: Minus },
   { tool: "arrow" as const, label: "پیکان", Icon: ArrowLeft },
-    { tool: "custom-shape" as const, label: "سفارشی", Icon: Magicpen },
+  { tool: "custom-shape" as const, label: "سفارشی", Icon: PenTool },
 ];
 
 const RectangleInstruction: FC = () => {
@@ -45,10 +45,7 @@ const RectangleInstruction: FC = () => {
               type="button"
               key={shape.id}
               onClick={() => handleShapeClick(shape.id)}
-                            className={clx(
-                                "size-[60px] flex flex-col gap-1 justify-center items-center rounded-xl text-[13px] transition-colors",
-                                isActive ? "" : "border-transparent",
-                            )}
+              className={clx("size-[60px] flex flex-col gap-1 justify-center items-center rounded-xl text-[13px] transition-colors", isActive ? "" : "border-transparent")}
               aria-pressed={isActive}
             >
               <img src={shape.icon} alt={shape.alt} className={clx("w-6", isActive && "filterBlack")} />
@@ -63,10 +60,7 @@ const RectangleInstruction: FC = () => {
               type="button"
               key={drawTool}
               onClick={() => setTool(drawTool)}
-                            className={clx(
-                                "size-[60px] flex flex-col gap-1 justify-center items-center rounded-xl text-[13px] transition-colors",
-                                isActive ? "" : "border-transparent",
-                            )}
+              className={clx("size-[60px] flex flex-col gap-1 justify-center items-center rounded-xl text-[13px] transition-colors", isActive ? "" : "border-transparent")}
               aria-pressed={isActive}
             >
               <Icon size={24} color={isActive ? "black" : "#7A7A7A"} variant={isActive ? "Bold" : "Outline"} />
@@ -84,9 +78,7 @@ const RectangleInstruction: FC = () => {
       )}
 
       {(tool === "line" || tool === "arrow") && (
-                <p className="mt-9 text-sm text-gray-600">
-                    {tool === "line" ? "برای رسم خط، روی کانوس کلیک کرده و بکشید" : "برای رسم پیکان، روی کانوس کلیک کرده و بکشید"}
-                </p>
+        <p className="mt-9 text-sm text-gray-600">{tool === "line" ? "برای رسم خط، روی کانوس کلیک کرده و بکشید" : "برای رسم پیکان، روی کانوس کلیک کرده و بکشید"}</p>
       )}
 
       {tool === "custom-shape" && (