feat: generator handle svg (#20)

Author: Seann0824

src/markdown/component-workflow.md

@@ -155,13 +155,88 @@ AI must analyze component design and infer:
    - State definitions
    - Slot specifications
    - Component structure
+   - Image assets and their paths
 3. If user identifies issues:
    - Collect all feedback
    - Make required modifications to the architecture document
    - Present updated document for review
 4. Repeat review cycle until user explicitly approves the document
 5. Only proceed to Test Generation phase after user confirmation
 
+#### Image Resource Handling
+
+**CRITICAL STEP**: After user confirmation of the architecture document, and before proceeding to Test Generation:
+
+1.  **Resource Inventory and Path Documentation**:
+
+    - The architecture document must include an "Image Resources" section that clearly lists all necessary resources in a table format:
+
+    ```markdown
+    ## Image Resources
+
+    ### Resource List and Paths
+
+    | Icon Description | Original Path             | Target Path                                             | Icon Color Control                                   |
+    | ---------------- | ------------------------- | ------------------------------------------------------- | ---------------------------------------------------- |
+    | Close Icon       | `/original/path/icon.svg` | `src/components/${componentName}/images/icon-close.svg` | Dynamically controlled, defaults to match text color |
+    | Other Icon       | ...                       | ...                                                     | ...                                                  |
+    ```
+
+2.  **Copy Images**:
+
+    - Copy all necessary image resources listed in the architecture document to the component-specific directory.
+    - Use semantic filenames such as `icon-close.svg`, `icon-success.svg`, `bg-header.png`, etc., ensuring the names clearly indicate the purpose of each image.
+    - The target path must be `src/components/${componentName}/images/`. Create this directory if it doesn't exist.
+    - Example:
+      ```bash
+      mkdir -p src/components/${componentName}/images
+      cp /original/path/close-icon.svg src/components/${componentName}/images/icon-close.svg
+      ```
+
+3.  **SVG Image Import and Color Specification**:
+
+    - The architecture document must clearly specify the import method and color control approach for SVG icons.
+    - SVGs must be imported using the following method to ensure dynamic color control:
+
+      ```typescript
+      import CloseIcon from "./images/icon-close.svg?raw"; // ?raw ensures it's imported as a string
+      ```
+
+    - The architecture document must include code examples for SVG usage and color control:
+
+      ````markdown
+      ### Icon Import and Usage Method
+
+      ```typescript
+      // In ${componentName}.vue, import icons
+      import CloseIcon from "./images/icon-close.svg?raw";
+      import SuccessIcon from "./images/icon-success.svg?raw";
+      ```
+      ````
+
+      Using SVGs in templates and controlling their color:
+
+      ```html
+      <template>
+        <div class="icon-container" v-html="CloseIcon"></div>
+      </template>
+
+      <style scoped>
+        .icon-container svg {
+          fill: v-bind("dynamicColorVariable"); /* Dynamically bind color */
+        }
+        /* Or use CSS variables to control color */
+        .icon-container svg {
+          fill: var(--icon-color, currentColor);
+        }
+      </style>
+      ```
+
+    - For each SVG icon, the architecture document must clearly specify:
+      1. Default color
+      2. Whether the color is fixed or needs to be dynamically controlled
+      3. Color variations in different states
+
 ### 2. Test Generation
 
 **Input**: Approved architecture document  

src/tools/get-component-workflow.ts

@@ -58,7 +58,12 @@ export class GetComponentWorkflowTool extends BaseTool {
         (layer.path ?? []).forEach((svgPath: string, index: number) => {
           const filePath = `${imageDir}/${id}-${index}.svg`;
           if (!fs.existsSync(filePath)) {
-            fs.writeFileSync(filePath, svgPath);
+            fs.writeFileSync(
+              filePath,
+              `<svg width="100%" height="100%" viewBox="0 0 16 16"xmlns="http://www.w3.org/2000/svg">
+  <path d="${svgPath}" fill="currentColor"/>
+</svg>`
+            );
           }
           layer.imageUrls.push(filePath);
         });
@@ -91,7 +96,7 @@ export class GetComponentWorkflowTool extends BaseTool {
               },
               message: "Component development files successfully created",
               rules: [
-                `Follow the component workflow process defined in file://${workflowFilePath} for structured development.`,
+                `Follow the component workflow process defined in file://${workflowFilePath} for structured development. This workflow contains a lot of content, you'll need to read it in multiple sessions.`,
                 `Implement the component according to the specifications in file://${componentJsonDir}, ensuring all properties and states are properly handled.`,
               ],
             }),