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)
+

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})
     `,
   };