chore(deps-dev): bump vite from 4.5.2 to 4.5.3

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.5.2 to 4.5.3.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v4.5.3/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v4.5.3/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

README.md

@@ -86,24 +86,19 @@ ReactDOM.render(<App />, document.getElementById("root"));
 </script>
 ```
 
-> [!NOTE]
+> **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.
-> 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
 
@@ -116,12 +111,9 @@ 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.2",
+    "vite": "^4.5.3",
     "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.2)
+    version: 3.1.0(vite@4.5.3)
   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.2
+    specifier: ^4.5.3
-    version: 4.5.2(@types/node@18.19.6)
+    version: 4.5.3(@types/node@18.19.6)
   vite-plugin-svgr:
     specifier: ^2.4.0
-    version: 2.4.0(vite@4.5.2)
+    version: 2.4.0(vite@4.5.3)
 
 packages:
 
@@ -1079,7 +1079,7 @@ packages:
     resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
     dev: true
 
-  /@vitejs/plugin-react@3.1.0(vite@4.5.2):
+  /@vitejs/plugin-react@3.1.0(vite@4.5.3):
     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.2(@types/node@18.19.6)
+      vite: 4.5.3(@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.2):
+  /vite-plugin-svgr@2.4.0(vite@4.5.3):
     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.2(@types/node@18.19.6)
+      vite: 4.5.3(@types/node@18.19.6)
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /vite@4.5.2(@types/node@18.19.6):
+  /vite@4.5.3(@types/node@18.19.6):
-    resolution: {integrity: sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==}
+    resolution: {integrity: sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:

scripts/generate.ts

@@ -1,8 +1,8 @@
-import fs from "node:fs/promises";
 import path from "node:path";
+import fs from "node:fs/promises";
 import { fileURLToPath } from "node:url";
-import { icons, IconStyle } from "@phosphor-icons/core";
 import IconJar, { IconGroup, IconSet, Icon, License } from "iconjar-exporter";
+import { icons, IconStyle } from "@phosphor-icons/core";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -23,54 +23,6 @@ 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");
@@ -116,7 +68,7 @@ class IconJarExporter implements Exporter {
 }
 
 (async function main() {
-  for (const exporter of [IconJarExporter, NucleoExporter]) {
+  for (const exporter of [IconJarExporter]) {
     await exporter.load();
     await exporter.save();
   }

src/utils/index.ts

@@ -30,24 +30,33 @@ export function getCodeSnippets({
   const { r, g, b } = TinyColor(color).toRgb();
 
   return {
-    [SnippetType.HTML]: `<i class="ph${isDefaultWeight ? "" : `-${weight}`
+    [SnippetType.HTML]: `<i class="ph${
+      isDefaultWeight ? "" : `-${weight}`
     } ph-${name}"></i>`,
-    [SnippetType.REACT]: `<${displayName} size={${size}} ${!isDefaultColor ? `color="${color}" ` : ""
+    [SnippetType.REACT]: `<${displayName} size={${size}} ${
+      !isDefaultColor ? `color="${color}" ` : ""
     }${isDefaultWeight ? "" : `weight="${weight}" `}/>`,
-    [SnippetType.VUE]: `<Ph${displayName} :size="${size}" ${!isDefaultColor ? `color="${color}" ` : ""
+    [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())
+    )}${
-      },\n  size: ${size.toFixed(1)},\n${!isDefaultColor ? `  color: Color(0xff${color.replace("#", "")}),\n` : ""
+      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
+    [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)})`