fix(app): update vue snippet syntax

src/utils/index.ts

@@ -30,38 +30,29 @@ export function getCodeSnippets({
   const { r, g, b } = TinyColor(color).toRgb();
 
   return {
-    [SnippetType.HTML]: `<i class="ph${
-      isDefaultWeight ? "" : `-${weight}`
-    } ph-${name}"></i>`,
-    [SnippetType.REACT]: `<${displayName} size={${size}} ${
-      !isDefaultColor ? `color="${color}" ` : ""
-    }${isDefaultWeight ? "" : `weight="${weight}" `}/>`,
-    [SnippetType.VUE]: `<ph${displayName
-      .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
-      .toLowerCase()} :size="${size}" ${
-      !isDefaultColor ? `color="${color}" ` : ""
-    }${isDefaultWeight ? "" : `weight="${weight}" `}/>`,
+    [SnippetType.HTML]: `<i class="ph${isDefaultWeight ? "" : `-${weight}`
+      } ph-${name}"></i>`,
+    [SnippetType.REACT]: `<${displayName} size={${size}} ${!isDefaultColor ? `color="${color}" ` : ""
+      }${isDefaultWeight ? "" : `weight="${weight}" `}/>`,
+    [SnippetType.VUE]: `<Ph${displayName} :size="${size}" ${!isDefaultColor ? `color="${color}" ` : ""
+      }${isDefaultWeight ? "" : `weight="${weight}" `}/>`,
     [SnippetType.FLUTTER]: `Icon(\n  PhosphorIcons.${displayName.replace(
       /^\w/,
       (c) => c.toLowerCase()
-    )}${
-      isDefaultWeight ? "" : weight.replace(/^\w/, (c) => c.toUpperCase())
-    },\n  size: ${size.toFixed(1)},\n${
-      !isDefaultColor ? `  color: Color(0xff${color.replace("#", "")}),\n` : ""
-    })`,
-    [SnippetType.ELM]: `Phosphor.${camelName}${
-      isDefaultWeight ? "" : " " + pascalWeight
-    }
+    )}${isDefaultWeight ? "" : weight.replace(/^\w/, (c) => c.toUpperCase())
+      },\n  size: ${size.toFixed(1)},\n${!isDefaultColor ? `  color: Color(0xff${color.replace("#", "")}),\n` : ""
+      })`,
+    [SnippetType.ELM]: `Phosphor.${camelName}${isDefaultWeight ? "" : " " + pascalWeight
+      }
     |> withSize ${size}
     |> withSizeUnit "px"
     |> toHtml []`,
-    [SnippetType.SWIFT]: `Ph.${camelName}.${weight}${
-      !isDefaultColor
+    [SnippetType.SWIFT]: `Ph.${camelName}.${weight}${!isDefaultColor
         ? `\n    .color(red: ${u8ToCGFloatStr(r)}, green: ${u8ToCGFloatStr(
-            g
-          )}, blue: ${u8ToCGFloatStr(b)})`
+          g
+        )}, blue: ${u8ToCGFloatStr(b)})`
         : ""
-    }
+      }
     .frame(width: ${size}, height: ${size})
     `,
   };