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

Author: rektdeckard

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

core

@@ -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/App.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/CustomIcon.tsx

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

example/tsconfig.json

@@ -95,9 +95,12 @@ const I: Icon = forwardRef((props, ref) => (
   <IconBase ref={ref} {...props} weights={weights} />
 ));
 
-I.displayName = "${name}";
-export { I as ${name}${
-      !!ALIASES[key] ? `, I as ${pascalize(ALIASES[key])}` : ""
+I.displayName = "${name}Icon";
+
+/** @deprecated Use ${name}Icon */
+export const ${name} = I;
+export { I as ${name}Icon${
+      !!ALIASES[key] ? `, I as ${pascalize(ALIASES[key])}Icon` : ""
     } }
 `;
 
@@ -113,9 +116,12 @@ const I: Icon = forwardRef((props, ref) => (
   <SSRBase ref={ref} {...props} weights={weights} />
 ));
 
-I.displayName = "${name}";
-export { I as ${name}${
-      !!ALIASES[key] ? `, I as ${pascalize(ALIASES[key])}` : ""
+I.displayName = "${name}Icon";
+
+/** @deprecated Use ${name}Icon */
+export const ${name} = I;
+export { I as ${name}Icon${
+      !!ALIASES[key] ? `, I as ${pascalize(ALIASES[key])}Icon` : ""
     } }
 `;
 
@@ -189,7 +195,7 @@ export * from "./${name}";
   }
 }
 
-function pascalize(str) {
+function pascalize(str: string) {
   return str
     .split("-")
     .map((substr) => substr.replace(/^\w/, (c) => c.toUpperCase()))

scripts/assemble.ts

@@ -16,5 +16,8 @@ const I: Icon = forwardRef((props, ref) => (
   <IconBase ref={ref} {...props} weights={weights} />
 ));
 
-I.displayName = "Acorn";
-export { I as Acorn };
+I.displayName = "AcornIcon";
+
+/** @deprecated Use AcornIcon */
+export const Acorn = I;
+export { I as AcornIcon };

src/csr/Acorn.tsx

@@ -16,5 +16,8 @@ const I: Icon = forwardRef((props, ref) => (
   <IconBase ref={ref} {...props} weights={weights} />
 ));
 
-I.displayName = "AddressBook";
-export { I as AddressBook };
+I.displayName = "AddressBookIcon";
+
+/** @deprecated Use AddressBookIcon */
+export const AddressBook = I;
+export { I as AddressBookIcon };

src/csr/AddressBook.tsx

@@ -16,5 +16,8 @@ const I: Icon = forwardRef((props, ref) => (
   <IconBase ref={ref} {...props} weights={weights} />
 ));
 
-I.displayName = "AddressBookTabs";
-export { I as AddressBookTabs };
+I.displayName = "AddressBookTabsIcon";
+
+/** @deprecated Use AddressBookTabsIcon */
+export const AddressBookTabs = I;
+export { I as AddressBookTabsIcon };

src/csr/AddressBookTabs.tsx

@@ -16,5 +16,8 @@ const I: Icon = forwardRef((props, ref) => (
   <IconBase ref={ref} {...props} weights={weights} />
 ));
 
-I.displayName = "AirTrafficControl";
-export { I as AirTrafficControl };
+I.displayName = "AirTrafficControlIcon";
+
+/** @deprecated Use AirTrafficControlIcon */
+export const AirTrafficControl = I;
+export { I as AirTrafficControlIcon };