feat(icons): add Icon suffix to all icons and deprecate old names

README.md

@@ -27,14 +27,14 @@ npm i @phosphor-icons/react
 Simply import the icons you need, and add them anywhere in your render method. Phosphor supports tree-shaking, so your bundle only includes code for the icons you use.
 
 ```tsx
-import { Horse, Heart, Cube } from "@phosphor-icons/react";
+import { HorseIcon, HeartIcon, CubeIcon } from "@phosphor-icons/react";
 
 const App = () => {
   return (
     <main>
-      <Horse />
-      <Heart color="#AE2983" weight="fill" size={32} />
-      <Cube color="teal" weight="duotone" />
+      <HorseIcon />
+      <HeartIcon color="#AE2983" weight="fill" size={32} />
+      <CubeIcon color="teal" weight="duotone" />
     </main>
   );
 };
@@ -46,7 +46,7 @@ When importing icons during development directly from the main module `@phosphor
 To avoid transpiling all modules, import individual icons from their specific file paths instead:
 
 ```tsx
-import { BellSimple } from "@phosphor-icons/react/dist/icons/BellSimple";
+import { BellSimpleIcon } from "@phosphor-icons/react/dist/csr/BellSimple";
 ```
 
 #### Next.js Specific Optimizations
@@ -66,10 +66,10 @@ module.exports = {
 When using Phosphor Icons in an SSR environment, within a React Server Component, or in any environment that does not permit the use of the Context API ([Next.js](https://nextjs.org/) Server Component, for example), import icons from the `/dist/ssr` submodule:
 
 ```tsx
-import { Fish } from "@phosphor-icons/react/dist/ssr";
+import { FishIcon } from "@phosphor-icons/react/dist/ssr";
 
 const MyServerComponent = () => {
-  return <Fish weight="duotone" />;
+  return <FishIcon weight="duotone" />;
 };
 ```
 
@@ -91,7 +91,7 @@ Icon components accept all props that you can pass to a normal SVG element, incl
 Phosphor takes advantage of React Context to make applying a default style to all icons simple. Create an `IconContext.Provider` at the root of the app (or anywhere above the icons in the tree) and pass in a configuration object with props to be applied by default to all icons:
 
 ```tsx
-import { IconContext, Horse, Heart, Cube } from "@phosphor-icons/react";
+import { IconContext, HorseIcon, HeartIcon, CubeIcon } from "@phosphor-icons/react";
 
 const App = () => {
   return (
@@ -104,9 +104,9 @@ const App = () => {
       }}
     >
       <div>
-        <Horse /> {/* I'm lime-green, 32px, and bold! */}
-        <Heart /> {/* Me too! */}
-        <Cube /> {/* Me three :) */}
+        <HorseIcon /> {/* I'm lime-green, 32px, and bold! */}
+        <HeartIcon /> {/* Me too! */}
+        <CubeIcon /> {/* Me three :) */}
       </div>
     </IconContext.Provider>
   );
@@ -132,7 +132,7 @@ The following will cause the Cube icon to rotate and pulse:
 ```jsx
 const RotatingCube = () => {
   return (
-    <Cube color="darkorchid" weight="duotone">
+    <CubeIcon color="darkorchid" weight="duotone">
       <animate
         attributeName="opacity"
         values="0;1;0"
@@ -148,7 +148,7 @@ const RotatingCube = () => {
         to="360 0 0"
         repeatCount="indefinite"
       ></animateTransform>
-    </Cube>
+    </CubeIcon>
   );
 };
 ```
@@ -163,9 +163,9 @@ You may wish to import all icons at once for use in your project, though dependi
 ```tsx
 import * as Icon from "@phosphor-icons/react";
 
-<Icon.Smiley />
-<Icon.Folder weight="thin" />
-<Icon.BatteryHalf size="24px" />
+<Icon.SmileyIcon />
+<Icon.FolderIcon weight="thin" />
+<Icon.BatteryHalfIcon size="24px" />
 ```
 
 For information on using Phosphor Icons in Server Components, see See [React Server Components and SSR](#react-server-components-and-ssr).

example/App.tsx

@@ -1,11 +1,11 @@
 import { useState, useCallback } from "react";
 
-import * as Icons from "../dist";
-import { IconContext } from "../dist";
-import type { IconWeight, Icon } from "../dist";
+import * as Icons from "..";
+import { IconContext } from "..";
+import type { IconWeight, Icon } from "..";
 import { icons } from "../core/src/icons";
 import { CustomIcon } from "./CustomIcon";
-import { At } from "../dist/ssr";
+import { AtIcon } from "..";
 import "./index.css";
 
 const pascalNames = new Set(icons.map((entry) => entry.pascal_name));
@@ -73,9 +73,9 @@ const App = () => {
           <CustomIcon size={32} weight="fill" color="darkorange" />
         </div>
         <div>
-          <At />
-          <At color="crimson" size={48} />
-          <At color="teal" size={48} weight="fill" />
+          <AtIcon />
+          <AtIcon color="crimson" size={48} />
+          <AtIcon color="teal" size={48} weight="fill" />
         </div>
         <Icons.Cube
           style={{ cursor: "pointer" }}

example/CustomIcon.tsx

@@ -1,5 +1,5 @@
 import { ReactElement, forwardRef } from "react";
-import { IconBase, Icon, IconWeight } from "../dist";
+import { IconBase, Icon, IconWeight } from "..";
 
 const weights = new Map<IconWeight, ReactElement>([
   [

example/tsconfig.json

@@ -15,6 +15,6 @@
     "preserveConstEnums": true,
     "removeComments": true,
     "sourceMap": true,
-    "strictNullChecks": true,
-  },
+    "strictNullChecks": true
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phosphor-icons/react",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "A clean and friendly icon family for React",
   "author": {
     "name": "Tobias Fried",
@@ -12,47 +12,46 @@
   "homepage": "https://phosphoricons.com",
   "sideEffects": false,
   "private": false,
-  "type": "module",
-  "module": "./dist/index.mjs",
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.es.js",
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs.js"
     },
     "./dist/icons/*": {
-      "import": "./dist/csr/*.mjs",
-      "require": "./dist/index.cjs",
-      "types": "./dist/csr/*.d.ts"
+      "import": "./dist/csr/*.es.js",
+      "types": "./dist/csr/*.d.ts",
+      "require": "./dist/index.cjs.js"
     },
     "./dist/csr/*": {
-      "import": "./dist/csr/*.mjs",
-      "require": "./dist/index.cjs",
-      "types": "./dist/csr/*.d.ts"
+      "import": "./dist/csr/*.es.js",
+      "types": "./dist/csr/*.d.ts",
+      "require": "./dist/index.cjs.js"
     },
     "./dist/lib/*": {
-      "import": "./dist/lib/*.mjs",
-      "require": "./dist/index.cjs",
-      "types": "./dist/lib/*.d.ts"
+      "import": "./dist/lib/*.es.js",
+      "types": "./dist/lib/*.d.ts",
+      "require": "./dist/index.cjs.js"
     },
     "./dist/ssr": {
-      "import": "./dist/ssr/index.mjs",
-      "require": "./dist/index.cjs",
-      "types": "./dist/ssr/index.d.ts"
+      "import": "./dist/ssr/index.es.js",
+      "types": "./dist/ssr/index.d.ts",
+      "require": "./dist/index.cjs.js"
     },
     "./dist/ssr/*": {
-      "import": "./dist/ssr/*.mjs",
-      "require": "./dist/index.cjs",
-      "types": "./dist/ssr/*.d.ts"
+      "import": "./dist/ssr/*.es.js",
+      "types": "./dist/ssr/*.d.ts",
+      "require": "./dist/index.cjs.js"
     },
     "./package.json": {
       "default": "./package.json"
     },
     "./*": {
-      "import": "./dist/csr/*.mjs",
-      "require": "./dist/index.cjs",
-      "types": "./dist/csr/*.d.ts"
+      "import": "./dist/csr/*.es.js",
+      "types": "./dist/csr/*.d.ts",
+      "require": "./dist/index.cjs.js"
     }
   },
   "types": "./dist/index.d.ts",
@@ -72,10 +71,10 @@
     "UI",
     "UX"
   ],
-  "packageManager": "pnpm@9",
+  "packageManager": "pnpm@10.6.3",
   "scripts": {
     "serve": "vite serve ./example",
-    "build": "vite build && tsc --emitDeclarationOnly",
+    "build": "vite build",
     "test": "vitest",
     "assemble": "tsx scripts/assemble.ts",
     "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,vue}\" \"./example/**/*.{js,jsx,ts,tsx,json,vue}\" \"./scripts/**/*.{mjs, js,jsx,ts,tsx,json,vue}\""
@@ -86,18 +85,19 @@
   },
   "devDependencies": {
     "@testing-library/react": "^14.1.2",
-    "@types/node": "^18.19.8",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "@vitejs/plugin-react": "^4.2.1",
-    "chalk": "^5.3.0",
-    "jsdom": "^21.1.2",
-    "prettier": "^3.2.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tsx": "^4.7.2",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.9",
-    "vitest": "^1.5.0"
+    "@types/node": "^22.15.18",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
+    "@vitejs/plugin-react": "^4.4.1",
+    "chalk": "^5.4.1",
+    "jsdom": "^26.1.0",
+    "prettier": "^3.5.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tsx": "^4.19.4",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.1.3"
   }
 }