feat(lib): true rsc support via new ssr exports

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phosphor-icons/react",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "A clean and friendly icon family for React",
   "author": {
     "name": "Tobias Fried",
@@ -22,19 +22,34 @@
       "types": "./dist/index.d.ts"
     },
     "./dist/icons/*": {
-      "import": "./dist/icons/*.mjs",
+      "import": "./dist/csr/*.mjs",
       "require": "./dist/index.cjs",
-      "types": "./dist/icons/*.d.ts"
+      "types": "./dist/csr/*.d.ts"
+    },
+    "./dist/csr/*": {
+      "import": "./dist/csr/*.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/csr/*.d.ts"
     },
     "./dist/lib/*": {
       "import": "./dist/lib/*.mjs",
       "require": "./dist/index.cjs",
       "types": "./dist/lib/*.d.ts"
     },
+    "./dist/ssr": {
+      "import": "./dist/ssr/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/ssr/*.d.ts"
+    },
+    "./dist/ssr/*": {
+      "import": "./dist/ssr/*.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/ssr/*.d.ts"
+    },
     "./*": {
-      "import": "./dist/icons/*.mjs",
+      "import": "./dist/csr/*.mjs",
       "require": "./dist/index.cjs",
-      "types": "./dist/icons/*.d.ts"
+      "types": "./dist/csr/*.d.ts"
     }
   },
   "types": "./dist/index.d.ts",

scripts/assemble.mjs

@@ -4,7 +4,13 @@ import path from "node:path";
 import chalk from "chalk";
 import { exec } from "node:child_process";
 
-import { ASSETS_PATH, COMPONENTS_PATH, INDEX_PATH } from "./index.mjs";
+import {
+  ASSETS_PATH,
+  CSR_PATH,
+  SSR_PATH,
+  DEFS_PATH,
+  INDEX_PATH,
+} from "./index.mjs";
 import { ALIASES } from "../core/bin/index.js";
 
 const icons = {};
@@ -103,10 +109,15 @@ function generateComponents() {
   let passes = 0;
   let fails = 0;
 
-  if (fs.existsSync(COMPONENTS_PATH)) {
-    fs.rmSync(COMPONENTS_PATH, { recursive: true });
+  if (fs.existsSync(CSR_PATH)) {
+    fs.rmSync(CSR_PATH, { recursive: true });
   }
-  fs.mkdirSync(COMPONENTS_PATH);
+  fs.mkdirSync(CSR_PATH);
+
+  if (fs.existsSync(SSR_PATH)) {
+    fs.rmSync(SSR_PATH, { recursive: true });
+  }
+  fs.mkdirSync(SSR_PATH);
 
   for (let key in icons) {
     const icon = icons[key];
@@ -123,33 +134,56 @@ function generateComponents() {
       continue;
     }
 
-    let componentString = `\
+    let defString = `\
 /* GENERATED FILE */
-import { forwardRef, ReactElement } from "react";
-import { IconWeight, Icon, IconBase } from "../lib";
+import { ReactElement } from "react";
+import { IconWeight } from "../lib";
 
-const weights = new Map<IconWeight, ReactElement>([
+export default new Map<IconWeight, ReactElement>([
 ${Object.entries(icon)
   .map(([weight, path]) => `["${weight}", <>${path.trim()}</>]`)
   .join(",")}
 ]);
 `;
 
-    componentString += `
+    let csrString = `
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/${name}";
+
 export const ${name}: Icon = forwardRef((props, ref) => (
   <IconBase ref={ref} {...props} weights={weights} />
 ));
 
 ${name}.displayName = "${name}";
 `;
+
+    let ssrString = `
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import SSRBase from "../lib/SSRBase";
+import weights from "../defs/${name}";
+
+export const ${name}: Icon = forwardRef((props, ref) => (
+  <SSRBase ref={ref} {...props} weights={weights} />
+));
+
+${name}.displayName = "${name}";
+`;
+
     try {
-      fs.writeFileSync(
-        path.join(COMPONENTS_PATH, `${name}.tsx`),
-        componentString,
-        {
-          flag: "w",
-        }
-      );
+      fs.writeFileSync(path.join(CSR_PATH, `${name}.tsx`), csrString, {
+        flag: "w",
+      });
+      fs.writeFileSync(path.join(SSR_PATH, `${name}.tsx`), ssrString, {
+        flag: "w",
+      });
+      fs.writeFileSync(path.join(DEFS_PATH, `${name}.tsx`), defString, {
+        flag: "w",
+      });
       console.log(`${chalk.inverse.green(" DONE ")} ${name}`);
       passes += 1;
     } catch (err) {
@@ -172,22 +206,34 @@ ${name}.displayName = "${name}";
 }
 
 function generateExports() {
-  let indexString = `\
+  let csrIndex = `\
 /* GENERATED FILE */
 export type { Icon, IconProps, IconWeight } from "./lib";
 export { IconContext, IconBase } from "./lib";
 
 `;
+
+  let ssrIndex = `\
+ /* GENERATED FILE */
+ `;
   for (let key in icons) {
     const name = pascalize(key);
-    indexString += `\
+    csrIndex += `\
 export { ${name}${
       !!ALIASES[key] ? `, ${name} as ${pascalize(ALIASES[key])}` : ""
-    } } from "./icons/${name}";
+    } } from "./csr/${name}";
+`;
+    ssrIndex += `\
+export { ${name}${
+      !!ALIASES[key] ? `, ${name} as ${pascalize(ALIASES[key])}` : ""
+    } } from "./${name}";
 `;
   }
   try {
-    fs.writeFileSync(INDEX_PATH, indexString, {
+    fs.writeFileSync(INDEX_PATH, csrIndex, {
+      flag: "w",
+    });
+    fs.writeFileSync(path.join(SSR_PATH, "index.ts"), ssrIndex, {
       flag: "w",
     });
     console.log(chalk.green("Export success"));

scripts/index.mjs

@@ -5,5 +5,7 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 export const ASSETS_PATH = path.join(__dirname, "../core/assets");
-export const COMPONENTS_PATH = path.join(__dirname, "../src/icons");
+export const DEFS_PATH = path.join(__dirname, "../src/defs");
+export const CSR_PATH = path.join(__dirname, "../src/csr");
+export const SSR_PATH = path.join(__dirname, "../src/ssr");
 export const INDEX_PATH = path.join(__dirname, "../src/index.ts");

src/csr/AddressBook.tsx

@@ -0,0 +1,11 @@
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/AddressBook";
+
+export const AddressBook: Icon = forwardRef((props, ref) => (
+  <IconBase ref={ref} {...props} weights={weights} />
+));
+
+AddressBook.displayName = "AddressBook";

src/csr/AirTrafficControl.tsx

@@ -0,0 +1,11 @@
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/AirTrafficControl";
+
+export const AirTrafficControl: Icon = forwardRef((props, ref) => (
+  <IconBase ref={ref} {...props} weights={weights} />
+));
+
+AirTrafficControl.displayName = "AirTrafficControl";

src/csr/Airplane.tsx

@@ -0,0 +1,11 @@
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/Airplane";
+
+export const Airplane: Icon = forwardRef((props, ref) => (
+  <IconBase ref={ref} {...props} weights={weights} />
+));
+
+Airplane.displayName = "Airplane";

src/csr/AirplaneInFlight.tsx

@@ -0,0 +1,11 @@
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/AirplaneInFlight";
+
+export const AirplaneInFlight: Icon = forwardRef((props, ref) => (
+  <IconBase ref={ref} {...props} weights={weights} />
+));
+
+AirplaneInFlight.displayName = "AirplaneInFlight";

src/csr/AirplaneLanding.tsx

@@ -0,0 +1,11 @@
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/AirplaneLanding";
+
+export const AirplaneLanding: Icon = forwardRef((props, ref) => (
+  <IconBase ref={ref} {...props} weights={weights} />
+));
+
+AirplaneLanding.displayName = "AirplaneLanding";

src/csr/AirplaneTakeoff.tsx

@@ -0,0 +1,11 @@
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/AirplaneTakeoff";
+
+export const AirplaneTakeoff: Icon = forwardRef((props, ref) => (
+  <IconBase ref={ref} {...props} weights={weights} />
+));
+
+AirplaneTakeoff.displayName = "AirplaneTakeoff";

src/csr/AirplaneTilt.tsx

@@ -0,0 +1,11 @@
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/AirplaneTilt";
+
+export const AirplaneTilt: Icon = forwardRef((props, ref) => (
+  <IconBase ref={ref} {...props} weights={weights} />
+));
+
+AirplaneTilt.displayName = "AirplaneTilt";

src/csr/Airplay.tsx

@@ -0,0 +1,11 @@
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/Airplay";
+
+export const Airplay: Icon = forwardRef((props, ref) => (
+  <IconBase ref={ref} {...props} weights={weights} />
+));
+
+Airplay.displayName = "Airplay";

src/csr/Alarm.tsx

@@ -0,0 +1,11 @@
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/Alarm";
+
+export const Alarm: Icon = forwardRef((props, ref) => (
+  <IconBase ref={ref} {...props} weights={weights} />
+));
+
+Alarm.displayName = "Alarm";

src/csr/Alien.tsx

@@ -0,0 +1,11 @@
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/Alien";
+
+export const Alien: Icon = forwardRef((props, ref) => (
+  <IconBase ref={ref} {...props} weights={weights} />
+));
+
+Alien.displayName = "Alien";

src/csr/AlignBottom.tsx

@@ -0,0 +1,11 @@
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/AlignBottom";
+
+export const AlignBottom: Icon = forwardRef((props, ref) => (
+  <IconBase ref={ref} {...props} weights={weights} />
+));
+
+AlignBottom.displayName = "AlignBottom";

src/csr/AlignBottomSimple.tsx

@@ -0,0 +1,11 @@
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/AlignBottomSimple";
+
+export const AlignBottomSimple: Icon = forwardRef((props, ref) => (
+  <IconBase ref={ref} {...props} weights={weights} />
+));
+
+AlignBottomSimple.displayName = "AlignBottomSimple";

src/csr/AlignCenterHorizontal.tsx

@@ -0,0 +1,11 @@
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/AlignCenterHorizontal";
+
+export const AlignCenterHorizontal: Icon = forwardRef((props, ref) => (
+  <IconBase ref={ref} {...props} weights={weights} />
+));
+
+AlignCenterHorizontal.displayName = "AlignCenterHorizontal";

src/csr/AlignCenterHorizontalSimple.tsx

@@ -0,0 +1,11 @@
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/AlignCenterHorizontalSimple";
+
+export const AlignCenterHorizontalSimple: Icon = forwardRef((props, ref) => (
+  <IconBase ref={ref} {...props} weights={weights} />
+));
+
+AlignCenterHorizontalSimple.displayName = "AlignCenterHorizontalSimple";

src/csr/AlignCenterVertical.tsx

@@ -0,0 +1,11 @@
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/AlignCenterVertical";
+
+export const AlignCenterVertical: Icon = forwardRef((props, ref) => (
+  <IconBase ref={ref} {...props} weights={weights} />
+));
+
+AlignCenterVertical.displayName = "AlignCenterVertical";

src/csr/AlignCenterVerticalSimple.tsx

@@ -0,0 +1,11 @@
+/* GENERATED FILE */
+import { forwardRef } from "react";
+import type { Icon } from "../lib/types";
+import IconBase from "../lib/IconBase";
+import weights from "../defs/AlignCenterVerticalSimple";
+
+export const AlignCenterVerticalSimple: Icon = forwardRef((props, ref) => (
+  <IconBase ref={ref} {...props} weights={weights} />
+));
+
+AlignCenterVerticalSimple.displayName = "AlignCenterVerticalSimple";