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>
2024-04-26 00:04:30 +00:00
22 changed files with 1027 additions and 65136 deletions
--- a/.github/FUNDING.yaml
+++ b/.github/FUNDING.yaml
@@ -1,6 +0,0 @@
-# Thanks for considering supporting this project! 🎉
-github: [phosphor-icons, rektdeckard]
-open_collective: phosphoricons
-ko_fi: phosphoricons
-patreon: phosphoricons
-buy_me_a_coffee: phosphoricons
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -0,0 +1,3 @@
+github: [phosphor-icons, rektdeckard]
+patreon: phosphoricons
+custom: ["https://www.buymeacoffee.com/phosphoricons"]
--- a/.github/ISSUE_TEMPLATE/community_port.md
+++ b/.github/ISSUE_TEMPLATE/community_port.md
@@ -1,15 +0,0 @@
---
-name: Community port
-about: Add your Phosphor port to the list of community projects on all Phosphor repositories
-title: ""
-labels: documentation
-assignees: rektdeckard
---
-
-<!-- BEFORE YOU REQUEST -->
-<!-- 1. Links to free, open source software only please. No paid services or upselling. -->
-<!-- 2. If you are able to, please make a PR yourself adding your port (in alphabetical order) to the "Community Projects" section in README.md. -->
-
-**Details**
-
-<!-- What is the name of your port, and where can the source code or project page be found? -->
--- a/.github/logo.png
+++ b/.github/logo.png
--- a/.github/workflows/dreamhost-preview-static.yaml
+++ b/.github/workflows/dreamhost-preview-static.yaml
@@ -1,54 +0,0 @@
-name: Build and deploy to preview
-
-on:
-  push
-
-concurrency:
-  group: 'preview'
-  cancel-in-progress: true
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 9
-          run_install: false
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Install sshpass
-        run: sudo apt-get install -y sshpass
-
-      - name: Add SSH Key to known_hosts
-        env:
-          KNOWN_HOSTS_ENTRY: ${{ secrets.DREAMHOST_KNOWN_HOSTS_ENTRY }}
-          HOST: ${{ secrets.HOST }}
-        run: |
-          mkdir -p ~/.ssh
-          echo "$KNOWN_HOSTS_ENTRY" >> ~/.ssh/known_hosts
-          chmod 644 ~/.ssh/known_hosts
-
-      - name: Build static site
-        run: pnpm build
-
-      - name: Deploy via rsync and sshpass
-        env:
-          USERNAME: ${{ secrets.DREAMHOST_FTP_USERNAME }}
-          PASSWORD: ${{ secrets.DREAMHOST_FTP_PASSWORD }}
-          HOST: ${{ secrets.DREAMHOST_FTP_HOST }}
-          DEPLOY_PATH: preview.phosphoricons.com
-        run: |
-          sshpass -p "$PASSWORD" rsync -avz --delete ./dist/* $USERNAME@$HOST:$DEPLOY_PATH
--- a/.github/workflows/dreamhost-static.yaml
+++ b/.github/workflows/dreamhost-static.yaml
@@ -1,56 +0,0 @@
-name: Build and deploy to production
-
-on:
-  push:
-    branches:
-      - master
-
-concurrency:
-  group: 'prod'
-  cancel-in-progress: true
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 9
-          run_install: false
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Install sshpass
-        run: sudo apt-get install -y sshpass
-
-      - name: Add SSH Key to known_hosts
-        env:
-          KNOWN_HOSTS_ENTRY: ${{ secrets.DREAMHOST_KNOWN_HOSTS_ENTRY }}
-          HOST: ${{ secrets.HOST }}
-        run: |
-          mkdir -p ~/.ssh
-          echo "$KNOWN_HOSTS_ENTRY" >> ~/.ssh/known_hosts
-          chmod 644 ~/.ssh/known_hosts
-
-      - name: Build static site
-        run: pnpm build
-
-      - name: Deploy via rsync and sshpass
-        env:
-          USERNAME: ${{ secrets.DREAMHOST_FTP_USERNAME }}
-          PASSWORD: ${{ secrets.DREAMHOST_FTP_PASSWORD }}
-          HOST: ${{ secrets.DREAMHOST_FTP_HOST }}
-          DEPLOY_PATH: phosphoricons.com
-        run: |
-          sshpass -p "$PASSWORD" rsync -avz --delete ./dist/* $USERNAME@$HOST:$DEPLOY_PATH
--- a/.github/workflows/sync-docs.yaml
+++ b/.github/workflows/sync-docs.yaml
@@ -1,100 +0,0 @@
-name: Sync documentation
-
-on:
-  push:
-    paths:
-      - 'README.md'
-      - '.github/FUNDING.yaml'
-      - '.github/logo.png'
-    branches:
-      - master
-  workflow_dispatch:  # Allows manual triggering
-
-concurrency:
-  group: 'docs'
-  cancel-in-progress: true
-
-jobs:
-  sync-docs:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        repository: [
-          'phosphor-icons/core',
-          'phosphor-icons/figma',
-          'phosphor-icons/flutter',
-          'phosphor-icons/penpot',
-          'phosphor-icons/phosphor-elm',
-          'phosphor-icons/play',
-          'phosphor-icons/react',
-          'phosphor-icons/sketch',
-          'phosphor-icons/swift',
-          'phosphor-icons/theme',
-          'phosphor-icons/unplugin',
-          'phosphor-icons/vue',
-          'phosphor-icons/web',
-          'phosphor-icons/webcomponents'
-        ]
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          path: source-repo
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 9
-          run_install: false
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'pnpm'
-          cache-dependency-path: source-repo/pnpm-lock.yaml
-
-      - name: Install dependencies
-        working-directory: source-repo
-        run: pnpm install
-
-      - name: Sync to target repositories
-        env:
-          GITHUB_TOKEN: ${{ secrets.SYNC_PAT }}
-        run: |
-          echo "Syncing to ${{ matrix.repository }}"
-
-          # Get the source repository name and commit info
-          COMMIT_URL="https://github.com/${GITHUB_REPOSITORY}/commit/${GITHUB_SHA}"
-
-          # Clone target repository using HTTPS with token
-          git clone "https://x-access-token:${GITHUB_TOKEN}@github.com/${{ matrix.repository }}.git" target-repo
-
-          # Run sync script
-          cd source-repo
-          pnpm run sync-docs -- target-repo
-          cd ..
-
-          # Create PR if there are changes
-          cd target-repo
-          if [[ -n "$(git status --porcelain)" ]]; then
-            git config user.name "github-actions[bot]"
-            git config user.email "github-actions[bot]@users.noreply.github.com"
-
-            # Create branch
-            BRANCH="sync-readme-$(date +%Y%m%d-%H%M%S)"
-            git checkout -b $BRANCH
-
-            # Commit and push changes
-            git add .
-            git commit -am "chore(docs): sync readme section"
-            git push "https://x-access-token:${GITHUB_TOKEN}@github.com/${{ matrix.repository }}.git" $BRANCH
-
-            # Create PR using the GitHub CLI
-            gh pr create \
-              --repo "${{ matrix.repository }}" \
-              --title "chore(docs): sync readme section" \
-              --body "Automated PR to sync README section. This change originates from the following commit: ${COMMIT_URL}". \
-              --base $(git remote show origin | sed -n '/HEAD branch/s/.*: //p') \
-              --head $BRANCH
-          fi
--- a/README.md
+++ b/README.md
@@ -1,10 +1,7 @@
+<img src="/meta/phosphor-mark-tight-black.png" width="96" align="right" />
+
 # Phosphor Icons

-<!-- BEGIN_LOGO -->
-<img src="/.github/logo.png" width="128" align="right" />
-<!-- END_LOGO -->
-
-<!-- BEGIN_OVERVIEW -->
 Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.

 - 1,248 icons and counting
@@ -13,7 +10,6 @@ Phosphor is a flexible icon family for interfaces, diagrams, presentations — w
 - Raw stroke information retained to fine-tune the style

 More ways to use at [phosphoricons.com](https://phosphoricons.com).
-<!-- END_OVERVIEW -->

 ## For developers

@@ -21,27 +17,18 @@ Phosphor is available for [web](https://github.com/phosphor-icons/web), [React](

 ### Vanilla Web

- **Simple to use** – We use a similar approach as many other icon sets out there, providing icons as a webfont that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons. But you don't need to know that. All you need to do is add the stylesheet for each weight you need to the document `<head>`, and drop in icons with an `<i/>` tag and the appropriate class:
+- **Simple to use** – We use a similar approach as many other icon sets out there, providing icons as a webfont that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons. But you don't need to know that. All you need to do is add the script to the document `<head>`, and drop in icons with an `<i/>` tag and the appropriate class:

 ```html
 <!doctype html>
 <html>
  <head>
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css"
-    />
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css"
-    />
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
  </head>
  <body>
-    <i class="ph ph-smiley"></i>
+    <i class="ph-smiley"></i>
    <i class="ph-fill ph-heart" style="color: hotpink"></i>
-    <i class="ph ph-cube"></i>
+    <i class="ph-thin ph-cube"></i>
  </body>
 </html>
 ```
@@ -99,64 +86,34 @@ 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.

-<!-- BEGIN_LINKS -->
-## Our Projects
+## 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/elm](https://github.com/phosphor-icons/phosphor-elm) ▲ Phosphor icons for Elm
- [@phosphor-icons/figma](https://github.com/phosphor-icons/figma) ▲ Phosphor icons Figma plugin
- [@phosphor-icons/flutter](https://github.com/phosphor-icons/flutter) ▲ Phosphor IconData library for Flutter
- [@phosphor-icons/pack](https://github.com/phosphor-icons/pack) ▲ Phosphor web font stripper to generate minimal icon bundles
- [@phosphor-icons/penpot](https://github.com/phosphor-icons/penpot) ▲ Phosphor icons Penpot plugin
 - [@phosphor-icons/react](https://github.com/phosphor-icons/react) ▲ Phosphor icon component library for React
- [@phosphor-icons/sketch](https://github.com/phosphor-icons/sketch) ▲ Phosphor icons Sketch plugin
- [@phosphor-icons/swift](https://github.com/phosphor-icons/swift) ▲ Phosphor icon component library for SwiftUI
- [@phosphor-icons/theme](https://github.com/phosphor-icons/theme) ▲ A VS Code (and other IDE) theme with the Phosphor color palette
- [@phosphor-icons/unplugin](https://github.com/phosphor-icons/unplugin) ▲ A multi-framework bundler plugin for generating Phosphor sprite sheets
- [@phosphor-icons/vue](https://github.com/phosphor-icons/vue) ▲ Phosphor icon component library for Vue
 - [@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/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

 ## Community Projects

- [adamglin0/compose-phosphor-icons](https://github.com/adamglin0/compose-phosphor-icon) ▲ Phosphor icons for Compose Multiplatform
- [altdsoy/phosphor_icons](https://github.com/altdsoy/phosphor_icons) ▲ Phosphor icons for Phoenix and TailwindCSS
- [amPerl/egui-phosphor](https://github.com/amperl/egui-phosphor) ▲ Phosphor icons for egui apps (Rust)
- [babakfp/phosphor-icons-svelte](https://github.com/babakfp/phosphor-icons-svelte) ▲ Phosphor icons for Svelte apps
- [brettkolodny/phosphor-lustre](https://github.com/brettkolodny/phosphor-lustre) ▲ Phosphor icons for Lustre
- [cellularmitosis/phosphor-uikit](https://github.com/cellularmitosis/phosphor-uikit) ▲ XCode asset catalog generator for Phosphor icons (Swift/UIKit)
- [cjohansen/phosphor-clj](https://github.com/cjohansen/phosphor-clj) ▲ Phosphor icons as Hiccup for Clojure and ClojureScript
- [codeat3/blade-phosphor-icons](https://github.com/codeat3/blade-phosphor-icons) ▲ Phosphor icons in your Laravel Blade views
- [dreamRs/phosphor-r](https://github.com/dreamRs/phosphoricons) ▲ Phosphor icon wrapper for R documents and applications
- [duongdev/phosphor-react-native](https://github.com/duongdev/phosphor-react-native) ▲ Phosphor icon component library for React Native
- [haruaki07/phosphor-svelte](https://github.com/haruaki07/phosphor-svelte) ▲ Phosphor icons for Svelte apps
- [IgnaceMaes/ember-phosphor-icons](https://github.com/IgnaceMaes/ember-phosphor-icons) ▲ Phosphor icons for Ember apps
- [iota-uz/icons](https://github.com/iota-uz/icons) ▲ Phosphor icons as Templ components (Go)
- [jajuma/phosphorhyva](https://github.com/JaJuMa-GmbH/phosphor-hyva) ▲ Phosphor icons for Magento 2 & Mage-OS with Hyvä Theme
- [Kitten](https://kitten.small-web.org/reference/#icons) ▲ Phosphor icons integrated by default in Kitten
- [lucagoslar/phosphor-css](https://github.com/lucagoslar/phosphor-css) ▲ CSS wrapper for Phosphor SVG icons
- [maful/ruby-phosphor-icons](https://github.com/maful/ruby-phosphor-icons) ▲ Phosphor icons for Ruby and Rails applications
- [meadowsys/phosphor-svgs](https://github.com/meadowsys/phosphor-svgs) ▲ Phosphor icons as Rust string constants
- [mwood/tamagui-phosphor-icons](https://github.com/mwood23/tamagui-phosphor-icons) ▲ Phosphor icons for Tamagui
- [noozo/phosphoricons_elixir](https://github.com/noozo/phosphoricons_elixir) ▲ Phosphor icons as SVG strings for Elixir/Phoenix
- [oyedejioyewole/nuxt-phosphor-icons](https://github.com/oyedejioyewole/nuxt-phosphor-icons) ▲ Phosphor icons integration for Nuxt
- [pepaslabs/phosphor-uikit](https://github.com/pepaslabs/phosphor-uikit) ▲ Xcode asset catalog generator for Swift/UIKit
- [raycast/phosphor-icons](https://www.raycast.com/marinsokol/phosphor-icons) ▲ Phosphor icons Raycast extension
- [reatlat/eleventy-plugin-phosphoricons](https://github.com/reatlat/eleventy-plugin-phosphoricons) ▲ An Eleventy shortcode plugin to embed icons as inline SVGs
- [robruiz/wordpress-phosphor-icons-block](https://github.com/robruiz/phosphor-icons-block) ▲ Phosphor icon block for use in WordPress v5.8+
- [sachaw/solid-phosphor](https://github.com/sachaw/solid-phosphor) ▲ Phosphor icons for SolidJS
- [SeanMcP/phosphor-astro](https://github.com/SeanMcP/phosphor-astro) ▲ Phosphor icons as Astro components
- [SorenHolstHansen/phosphor-leptos](https://github.com/SorenHolstHansen/phosphor-leptos) ▲ Phosphor icon component library for Leptos apps (Rust)
- [vnphanquang/phosphor-icons-tailwindcss](https://github.com/vnphanquang/phosphor-icons-tailwindcss) ▲ TailwindCSS plugin for Phosphor icons
+- [phosphor-react-native](https://github.com/duongdev/phosphor-react-native) ▲ Phosphor icon component library for React Native
+- [phosphor-svelte](https://github.com/haruaki07/phosphor-svelte) ▲ Phosphor icons for Svelte apps
+- [phosphor-r](https://github.com/dreamRs/phosphoricons) ▲ Phosphor icon wrapper for R documents and applications
+- [blade-phosphor-icons](https://github.com/codeat3/blade-phosphor-icons) ▲ Phosphor icons in your Laravel Blade views
 - [wireui/phosphoricons](https://github.com/wireui/phosphoricons) ▲ Phosphor icons for Laravel
+- [phosphor-css](https://github.com/lucagoslar/phosphor-css) ▲ CSS wrapper for Phosphor SVG icons
+- [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)

 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)
-<!-- END_LINKS -->
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@phosphor-icons/homepage",
-  "version": "2.1.1",
+  "version": "2.0.6",
  "license": "MIT",
  "homepage": "https://phosphoricons.com",
  "author": {
@@ -20,14 +20,12 @@
  ],
  "repository": "github:phosphor-icons/homepage",
  "private": true,
-  "packageManager": "pnpm@9",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,vue}\"",
-    "generate": "tsx scripts/generate.ts",
-    "sync-docs": "tsx scripts/sync-docs.ts"
+    "generate": "tsx scripts/generate.ts"
  },
  "dependencies": {
    "@phosphor-icons/core": "^2.1.1",
@@ -57,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": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/assets/phosphor-icons.sketchplugin.zip
+++ b/public/assets/phosphor-icons.sketchplugin.zip
--- a/public/assets/phosphor.iconjar/META
+++ b/public/assets/phosphor.iconjar/META
--- a/public/assets/phosphor.nucleo.json
+++ b/public/assets/phosphor.nucleo.json
--- a/scripts/generate.ts
+++ b/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();
  }
--- a/scripts/sync-docs.ts
+++ b/scripts/sync-docs.ts
@@ -1,72 +0,0 @@
-import fs from "node:fs";
-import path from "node:path";
-
-const README_PATH = "README.md";
-const FUNDING_PATH = ".github/FUNDING.yaml";
-const LOGO_PATH = ".github/logo.png";
-
-const SYNC_SECTIONS = ["LOGO", "OVERVIEW", "LINKS"];
-const SYNC_FILES: Array<string | Array<string>> = [
-  [FUNDING_PATH, ".github/FUNDING.yml"],
-  [LOGO_PATH, "meta"],
-]; // These files will be replaced in the target repository
-
-(function main() {
-  const targetRepo = process.argv[process.argv.length - 1];
-  if (!targetRepo) throw new Error("Target repository not provided");
-
-  const readmePath = path.resolve(__dirname, `../${README_PATH}`);
-  const readmeContent = fs.readFileSync(readmePath, "utf8");
-
-  const targetReadmePath = path.resolve(__dirname, `../../${targetRepo}/${README_PATH}`);
-  if (!fs.existsSync(targetReadmePath)) throw new Error(`README.md not found in ${targetRepo}`);
-
-  for (const section of SYNC_SECTIONS) {
-    const readmeSection = extractSection(readmeContent, section);
-    if (readmeSection) {
-      const targetReadmeContent = fs.readFileSync(targetReadmePath, "utf8");
-      const updatedDocsContent = updateSection(targetReadmeContent, section, readmeSection);
-      fs.writeFileSync(targetReadmePath, updatedDocsContent);
-    }
-  }
-
-  for (const file of SYNC_FILES) {
-    const fileName = Array.isArray(file) ? file[0] : file;
-    const filePath = path.resolve(__dirname, `../${fileName}`);
-    const fileContent = fs.readFileSync(filePath);
-
-    // If target file has aliases, remove them
-    if (Array.isArray(file)) {
-      for (const alias of file) {
-        const targetPath = path.resolve(__dirname, `../../${targetRepo}/${alias}`);
-        if (fs.existsSync(targetPath)) {
-          fs.rmSync(targetPath, { recursive: true });
-        }
-      }
-    }
-
-    // Write the target file and intermediate directories, or overwrite if it already exists
-    const targetPath = path.resolve(__dirname, `../../${targetRepo}/${fileName}`);
-    if (!fs.existsSync(path.dirname(targetPath))) {
-      fs.mkdirSync(path.dirname(targetPath), { recursive: true });
-    }
-    fs.writeFileSync(targetPath, fileContent);
-  }
-})();
-
-function extractSection(content: string, section: string) {
-  const pattern = new RegExp(
-    `<!-- BEGIN_${section} -->\n([\\s\\S]*)\n<!-- END_${section} -->`,
-    "g",
-  );
-  const match = pattern.exec(content);
-  return match?.[1];
-}
-
-function updateSection(content: string, section: string, newContent: string) {
-  const pattern = new RegExp(
-    `<!-- BEGIN_${section} -->\n([\\s\\S]*)\n<!-- END_${section} -->`,
-    "g",
-  );
-  return content.replace(pattern, `<!-- BEGIN_${section} -->\n${newContent}\n<!-- END_${section} -->`);
-}
--- a/src/components/App/App.css
+++ b/src/components/App/App.css
@@ -48,10 +48,6 @@ body {
  background-color: var(--acid);
 }

-::-moz-color-swatch {
-  border: none;
-}
-
 h2 {
  font-weight: 400;
 }
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -65,14 +65,6 @@ const Footer = (_: FooterProps) => {
              AllTrails
            </a>
            ,{" "}
-            <a className="main-link" href="https://www.anthropic.com">
-              Anthropic
-            </a>
-            ,{" "}
-            <a className="main-link" href="https://www.babbel.com/">
-              Babbel
-            </a>
-            ,{" "}
            <a
              className="main-link"
              href="https://www.dive.club/course/figma-academy"
@@ -84,8 +76,8 @@ const Footer = (_: FooterProps) => {
              Framer
            </a>
            ,{" "}
-            <a className="main-link" href="https://www.khanacademy.org/">
-              Khan Academy
+            <a className="main-link" href="https://www.outgo.co/">
+              Outgo
            </a>
            ,{" "}
            <a
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -60,10 +60,6 @@ const Header = (_: HeaderProps) => {
              We are now processing donations via{" "}
              <a href="https://www.buymeacoffee.com/phosphoricons">
                Buy Me a Coffee
-              </a>{" "}
-              and{" "}
-              <a href="https://ko-fi.com/phosphoricons">
-                Ko-fi
              </a>
              ! Your one-time or recurring contribution does a lot to keep us
              going. Please show us some support if you can!
--- a/src/components/IconGrid/IconGrid.css
+++ b/src/components/IconGrid/IconGrid.css
@@ -16,8 +16,6 @@

 .grid-item {
  display: flex;
-  appearance: none;
-  background: transparent;
  box-sizing: border-box;
  width: 160px;
  height: 160px;
--- a/src/components/IconGrid/IconGridItem.tsx
+++ b/src/components/IconGrid/IconGridItem.tsx
@@ -68,10 +68,11 @@ const IconGridItem = (props: IconGridItemProps) => {
  }, [originOffset]);

  return (
-    <motion.button
+    <motion.div
      className="grid-item"
      key={name}
      ref={ref}
+      tabIndex={0}
      style={{
        ...style,
        backgroundColor: isOpen ? "var(--background-layer)" : undefined,
@@ -79,6 +80,7 @@ const IconGridItem = (props: IconGridItemProps) => {
      custom={delayRef}
      transition={transition}
      variants={itemVariants}
+      onKeyPress={(e) => e.key === "Enter" && handleOpen()}
      onClick={handleOpen}
    >
      <Icon />
@@ -87,7 +89,7 @@ const IconGridItem = (props: IconGridItemProps) => {
        {isNew && <span className="badge new">•</span>}
        {isUpdated && <span className="badge updated">•</span>}
      </p>
-    </motion.button>
+    </motion.div>
  );
 };

--- a/src/components/Links/Links.tsx
+++ b/src/components/Links/Links.tsx
@@ -5,7 +5,7 @@ import OutboundLink from "@/components/OutboundLink";

 import "./Links.css";

-interface LinksProps { }
+interface LinksProps {}

 const Links = (_: LinksProps) => {
  return (
@@ -14,7 +14,7 @@ const Links = (_: LinksProps) => {
        <ArrowElbowDownRight size={24} />
        <OutboundLink
          className="nav-link"
-          href="/assets/phosphor-icons.zip"
+          href="https://phosphoricons.com/assets/phosphor-icons.zip"
          eventLabel="Download all"
          download
          type="application/zip"
@@ -45,7 +45,7 @@ const Links = (_: LinksProps) => {
      <div>
        <ArrowElbowDownRight size={24} />
        <OutboundLink
-          href="/assets/phosphor-icons.sketchplugin.zip"
+          href="https://phosphoricons.com/assets/phosphor-icons.sketchplugin.zip"
          eventLabel="Download sketch plugin"
          download
          type="application/zip"
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -30,29 +30,38 @@ 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} :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
+      .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` : ""
-      })`,
-    [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})
    `,
  };