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>

.github/FUNDING.yaml

@@ -1,5 +0,0 @@
-# Thanks for considering supporting this project! 🎉
-github: [phosphor-icons, rektdeckard]
-patreon: phosphoricons
-buy_me_a_coffee: phosphoricons
-ko_fi: phosphoricons

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+github: [phosphor-icons, rektdeckard]
+patreon: phosphoricons
+custom: ["https://www.buymeacoffee.com/phosphoricons"]

.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

.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

.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

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
 
@@ -27,10 +23,10 @@ Phosphor is available for [web](https://github.com/phosphor-icons/web), [React](
 <!doctype html>
 <html>
   <head>
-    <script src="https://unpkg.com/@phosphor-icons/web@2.1.1"></script>
+    <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-thin ph-cube"></i>
   </body>
@@ -90,56 +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/theme) ▲ 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
-- [brettkolodny/phosphor-lustre](https://github.com/brettkolodny/phosphor-lustre) ▲ Phosphor icons for Lustre
-- [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
-- [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
-- [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 -->

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": {

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();
   }

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

src/components/App/App.css

@@ -48,10 +48,6 @@ body {
   background-color: var(--acid);
 }
 
-::-moz-color-swatch {
-  border: none;
-}
-
 h2 {
   font-weight: 400;
 }

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

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!

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;

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

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"

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