fix(app): update vue snippet syntax

README.md

@@ -86,19 +86,24 @@ ReactDOM.render(<App />, document.getElementById("root"));
 </script>
 ```
 
-> **Note:** Due to possible namespace collisions with built-in HTML elements, compononent names in the Vue library are prefixed with `Ph`, but otherwise follow the same naming conventions. Both Pascal and kebab-case conventions can be used in templates.
+> [!NOTE]
+> Due to possible namespace collisions with built-in HTML elements, compononent names in the Vue library are prefixed with `Ph`, but otherwise follow the same naming conventions. Both Pascal and kebab-case conventions can be used in templates.
 
 ## Our Related Projects
 
+- [@phosphor-icons/homepage](https://github.com/phosphor-icons/homepage) ▲ Phosphor homepage and general info
 - [@phosphor-icons/core](https://github.com/phosphor-icons/core) ▲ Phosphor icon assets and catalog
 - [@phosphor-icons/react](https://github.com/phosphor-icons/react) ▲ Phosphor icon component library for React
 - [@phosphor-icons/web](https://github.com/phosphor-icons/web) ▲ Phosphor icons for Vanilla JS
 - [@phosphor-icons/vue](https://github.com/phosphor-icons/vue) ▲ Phosphor icon component library for Vue
+- [@phosphor-icons/swift](https://github.com/phosphor-icons/swift) ▲ Phosphor icon component library for SwiftUI
 - [@phosphor-icons/elm](https://github.com/phosphor-icons/phosphor-elm) ▲ Phosphor icons for Elm
 - [@phosphor-icons/flutter](https://github.com/phosphor-icons/flutter) ▲ Phosphor IconData library for Flutter
 - [@phosphor-icons/webcomponents](https://github.com/phosphor-icons/webcomponents) ▲ Phosphor icons as Web Components
 - [@phosphor-icons/figma](https://github.com/phosphor-icons/figma) ▲ Phosphor icons Figma plugin
 - [@phosphor-icons/sketch](https://github.com/phosphor-icons/sketch) ▲ Phosphor icons Sketch plugin
+- [@phosphor-icons/pack](https://github.com/phosphor-icons/pack) ▲ Phosphor web font stripper to generate minimal icon bundles
+- [@phosphor-icons/theme](https://github.com/phosphor-icons/theme) ▲ A VS Code (and other IDE) theme with the Phosphor color palette
 
 ## Community Projects
 
@@ -111,9 +116,12 @@ ReactDOM.render(<App />, document.getElementById("root"));
 - [ruby-phosphor-icons](https://github.com/maful/ruby-phosphor-icons) ▲ Phosphor icons for Ruby and Rails applications
 - [eleventy-plugin-phosphoricons](https://github.com/reatlat/eleventy-plugin-phosphoricons) ▲ An Eleventy plugin for add shortcode, allows Phosphor icons to be embedded as inline svg into templates
 - [phosphor-leptos](https://github.com/SorenHolstHansen/phosphor-leptos) ▲ Phosphor icon component library for Leptos apps (rust)
+- [wordpress-phosphor-icons-block](https://github.com/robruiz/phosphor-icons-block) ▲ Phosphor icon block for use in WordPress v5.8+
+- [ember-phosphor-icons](https://github.com/IgnaceMaes/ember-phosphor-icons) ▲ Phosphor icons for Ember apps
 
 If you've made a port of Phosphor and you want to see it here, just open a PR [here](https://github.com/phosphor-icons/homepage)!
 
 ## License
 
 MIT © [Phosphor Icons](https://github.com/phosphor-icons)
+

package.json

@@ -55,7 +55,7 @@
     "prettier": "^3.1.1",
     "tsx": "^4.7.3",
     "typescript": "^4.9.5",
-    "vite": "^4.5.3",
+    "vite": "^4.5.2",
     "vite-plugin-svgr": "^2.4.0"
   },
   "eslintConfig": {

pnpm-lock.yaml

@@ -69,7 +69,7 @@ devDependencies:
     version: 1.4.6
   '@vitejs/plugin-react':
     specifier: ^3.1.0
-    version: 3.1.0(vite@4.5.3)
+    version: 3.1.0(vite@4.5.2)
   iconjar-exporter:
     specifier: ^1.0.10
     version: 1.0.10
@@ -83,11 +83,11 @@ devDependencies:
     specifier: ^4.9.5
     version: 4.9.5
   vite:
-    specifier: ^4.5.3
+    specifier: ^4.5.2
-    version: 4.5.3(@types/node@18.19.6)
+    version: 4.5.2(@types/node@18.19.6)
   vite-plugin-svgr:
     specifier: ^2.4.0
-    version: 2.4.0(vite@4.5.3)
+    version: 2.4.0(vite@4.5.2)
 
 packages:
 
@@ -1079,7 +1079,7 @@ packages:
     resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
     dev: true
 
-  /@vitejs/plugin-react@3.1.0(vite@4.5.3):
+  /@vitejs/plugin-react@3.1.0(vite@4.5.2):
     resolution: {integrity: sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -1090,7 +1090,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.7)
       magic-string: 0.27.0
       react-refresh: 0.14.0
-      vite: 4.5.3(@types/node@18.19.6)
+      vite: 4.5.2(@types/node@18.19.6)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1696,21 +1696,21 @@ packages:
       picocolors: 1.0.0
     dev: true
 
-  /vite-plugin-svgr@2.4.0(vite@4.5.3):
+  /vite-plugin-svgr@2.4.0(vite@4.5.2):
     resolution: {integrity: sha512-q+mJJol6ThvqkkJvvVFEndI4EaKIjSI0I3jNFgSoC9fXAz1M7kYTVUin8fhUsFojFDKZ9VHKtX6NXNaOLpbsHA==}
     peerDependencies:
       vite: ^2.6.0 || 3 || 4
     dependencies:
       '@rollup/pluginutils': 5.1.0
       '@svgr/core': 6.5.1
-      vite: 4.5.3(@types/node@18.19.6)
+      vite: 4.5.2(@types/node@18.19.6)
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /vite@4.5.3(@types/node@18.19.6):
+  /vite@4.5.2(@types/node@18.19.6):
-    resolution: {integrity: sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==}
+    resolution: {integrity: sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:

scripts/generate.ts

@@ -1,8 +1,8 @@
-import path from "node:path";
 import fs from "node:fs/promises";
+import path from "node:path";
 import { fileURLToPath } from "node:url";
-import IconJar, { IconGroup, IconSet, Icon, License } from "iconjar-exporter";
 import { icons, IconStyle } from "@phosphor-icons/core";
+import IconJar, { IconGroup, IconSet, Icon, License } from "iconjar-exporter";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -23,6 +23,54 @@ abstract class Exporter {
   }
 }
 
+class NucleoExporter implements Exporter {
+  static JSON_PATH = path.join(OUT_DIR, "./phosphor.nucleo.json");
+  static SET_ID = 1;
+  static data: {
+    sets: Array<{ label: string; id: number }>;
+    groups: Array<unknown>;
+    icons: Array<{
+      name: string;
+      content: string;
+      style: /* possibly just "outline" and "glyph" */ string;
+      tags: /* comma-separated, no spaces */ string;
+      set_id: number;
+    }>;
+  };
+
+  static async load(): Promise<void> {
+    NucleoExporter.data = {
+      sets: [{ label: "Phosphor Icons", id: NucleoExporter.SET_ID }],
+      groups: [],
+      icons: [],
+    };
+
+    for (const weight of Object.values(IconStyle)) {
+      for (const icon of icons) {
+        const name =
+          weight === "regular" ? icon.name : `${icon.name}-${weight}`;
+        const filePath = path.join(CORE_DIR, `${weight}/${name}.svg`);
+        const content = (await fs.readFile(filePath)).toString();
+
+        NucleoExporter.data.icons.push({
+          name,
+          content,
+          style: "outline",
+          tags: icon.tags.join(","),
+          set_id: NucleoExporter.SET_ID,
+        });
+      }
+    }
+  }
+
+  static async save(): Promise<void> {
+    await fs.writeFile(
+      NucleoExporter.JSON_PATH,
+      JSON.stringify(NucleoExporter.data)
+    );
+  }
+}
+
 class IconJarExporter implements Exporter {
   static iconJar: IconJar;
   static JAR_PATH = path.join(OUT_DIR, "./phosphor.iconjar");
@@ -68,7 +116,7 @@ class IconJarExporter implements Exporter {
 }
 
 (async function main() {
-  for (const exporter of [IconJarExporter]) {
+  for (const exporter of [IconJarExporter, NucleoExporter]) {
     await exporter.load();
     await exporter.save();
   }

src/utils/index.ts

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