### Install @phosphor-icons/react

Source: https://github.com/phosphor-icons/react/blob/master/README.md

Installs the @phosphor-icons/react package using npm. This is the first step to using Phosphor icons in your React project.

```bash
npm i @phosphor-icons/react
```

--------------------------------

### Import All Phosphor Icons at Once

Source: https://github.com/phosphor-icons/react/blob/master/README.md

Illustrates importing all Phosphor icons as a single namespace using `import * as Icon from "@phosphor-icons/react";`. This method can be convenient but may impact bundle size if not managed carefully with tree-shaking.

```tsx
import * as Icon from "@phosphor-icons/react";

<Icon.SmileyIcon />
<Icon.FolderIcon weight="thin" />
<Icon.BatteryHalfIcon size="24px" />

```

--------------------------------

### Basic Usage of Phosphor Icons in React

Source: https://github.com/phosphor-icons/react/blob/master/README.md

Demonstrates how to import and use Phosphor icons within a React application. Icons can be imported directly and used as components, with support for customization via props like color, weight, and size. Phosphor supports tree-shaking to minimize bundle size.

```tsx
import { HorseIcon, HeartIcon, CubeIcon } from "@phosphor-icons/react";

const App = () => {
  return (
    <main>
      <HorseIcon />
      <HeartIcon color="#AE2983" weight="fill" size={32} />
      <CubeIcon color="teal" weight="duotone" />
    </main>
  );
};

```

--------------------------------

### Apply Default Styles with React Context

Source: https://github.com/phosphor-icons/react/blob/master/README.md

Demonstrates how to use `IconContext.Provider` to apply default styles (color, size, weight) to all Phosphor icons within a React component tree. This simplifies styling by setting common properties once at a higher level.

```tsx
import { IconContext, HorseIcon, HeartIcon, CubeIcon } from "@phosphor-icons/react";

const App = () => {
  return (
    <IconContext.Provider
      value={{
        color: "limegreen",
        size: 32,
        weight: "bold",
        mirrored: false,
      }}>
      <div>
        <HorseIcon /> {/* I'm lime-green, 32px, and bold! */}
        <HeartIcon /> {/* Me too! */}
        <CubeIcon /> {/* Me three :)
      </div>
    </IconContext.Provider>
  );
};

```

--------------------------------

### Create Custom Phosphor Icons in React

Source: https://github.com/phosphor-icons/react/blob/master/README.md

Provides a template for creating custom icons by extending Phosphor's `IconBase` component. It involves defining icon paths for different weights and using `forwardRef` for proper ref handling.

```tsx
import { forwardRef, ReactElement } from "react";
import { Icon, IconBase, IconWeight } from "@phosphor-icons/react";

const weights = new Map<IconWeight, ReactElement>([
  ["thin", <path d="..." />],
  ["light", <path d="..." />],
  ["regular", <path d="..." />],
  ["bold", <path d="..." />],
  ["fill", <path d="..." />],
  [
    "duotone",
    <>
      <path d="..." opacity="0.2" />
      <path d="..." />
    </>,
  ],
]);

const CustomIcon: Icon = forwardRef((props, ref) => (
  <IconBase ref={ref} {...props} weights={weights} />
));

CustomIcon.displayName = "CustomIcon";

export default CustomIcon;

```

--------------------------------

### Custom SSR Icons with SSRBase in React

Source: https://context7.com/phosphor-icons/react/llms.txt

Demonstrates how to create custom icons for Server Components using `SSRBase` instead of `IconBase`. This approach is suitable for server-side rendering scenarios where custom graphics are needed.

```tsx
import { forwardRef, ReactElement } from "react";
import { Icon, SSRBase, IconWeight } from "@phosphor-icons/react/lib";

const weights = new Map<IconWeight, ReactElement>([
  ["regular", <path d="M128 24L232 128L128 232L24 128Z" />],
  ["fill", <path d="M128 24L232 128L128 232L24 128Z" fill="currentColor" />],
  // ... other weights
]);

const CustomDiamondIcon: Icon = forwardRef((props, ref) => (
  <SSRBase ref={ref} {...props} weights={weights} />
));

CustomDiamondIcon.displayName = "CustomDiamondIcon";

export default CustomDiamondIcon;
```

--------------------------------

### Optimize Imports for Development with Phosphor React

Source: https://context7.com/phosphor-icons/react/llms.txt

Import icons directly from their file paths to bypass bundler transpilation, significantly improving development build times. This method is recommended for development environments.

```tsx
// Direct file import for faster development builds
import { BellSimpleIcon } from "@phosphor-icons/react/dist/csr/BellSimple";
import { CheckCircleIcon } from "@phosphor-icons/react/dist/csr/CheckCircle";
import { WarningIcon } from "@phosphor-icons/react/dist/csr/Warning";

// For SSR environments
import { BellSimpleIcon as BellSSR } from "@phosphor-icons/react/dist/ssr/BellSimple";

const NotificationBell = () => {
  return (
    <div>
      <BellSimpleIcon size={24} color="gray" />
      <CheckCircleIcon size={24} color="green" weight="fill" />
      <WarningIcon size={24} color="orange" weight="bold" />
    </div>
  );
};

```

--------------------------------

### Next.js Specific Optimization with optimizePackageImports

Source: https://github.com/phosphor-icons/react/blob/master/README.md

Shows how to configure Next.js 13+ to optimize package imports for @phosphor-icons/react. By using `optimizePackageImports` in `next.config.js`, Next.js will only load the modules that are actively used, allowing direct imports from the main package without performance degradation.

```javascript
module.exports = {
  experimental: {
    optimizePackageImports: ["@phosphor-icons/react"],
  },
}

```

--------------------------------

### Import Performance Optimization for Bundlers

Source: https://github.com/phosphor-icons/react/blob/master/README.md

Provides a method to optimize icon imports by specifying individual file paths instead of importing from the main module. This prevents bundlers from transpiling all icons, significantly improving compilation time during development.

```tsx
import { BellSimpleIcon } from "@phosphor-icons/react/dist/csr/BellSimple";

```

--------------------------------

### Configure Next.js optimizePackageImports for Phosphor React

Source: https://context7.com/phosphor-icons/react/llms.txt

Enable Next.js's `optimizePackageImports` to automatically optimize imports from `@phosphor-icons/react`. This allows direct usage of the main module without compilation overhead, improving performance.

```js
// next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: ["@phosphor-icons/react"],
  },
};

```

```tsx
// Now you can import directly without performance penalty
import { SmileyIcon, FolderIcon, BatteryHalfIcon } from "@phosphor-icons/react";

const App = () => (
  <div>
    <SmileyIcon />
    <FolderIcon weight="thin" />
    <BatteryHalfIcon size="24px" />
  </div>
);

```

--------------------------------

### Server-Side Rendering (SSR) Icons in React

Source: https://context7.com/phosphor-icons/react/llms.txt

Demonstrates how to import and use Phosphor icons in SSR environments, such as Next.js Server Components. Icons are imported from the `/ssr` submodule and do not utilize React Context, rendering with default props.

```tsx
// In a Next.js Server Component or SSR environment
import { FishIcon, AnchorIcon, WaveIcon } from "@phosphor-icons/react/ssr";

const MyServerComponent = () => {
  return (
    <div>
      {/* SSR icons use default values: currentColor, 1em, regular weight */}
      <FishIcon />

      {/* Style via props (context not available) */}
      <AnchorIcon color="navy" size={48} weight="duotone" />
      <WaveIcon color="teal" weight="fill" mirrored />
    </div>
  );
};

export default MyServerComponent;

```

--------------------------------

### Global Icon Styling with IconContext

Source: https://context7.com/phosphor-icons/react/llms.txt

Shows how to use the `IconContext.Provider` to set default styling props (color, size, weight, mirrored) for all descendant icons. Props passed directly to individual icons will override the context values. Nested contexts allow for regional styling.

```tsx
import { IconContext, HorseIcon, HeartIcon, CubeIcon, StarIcon } from "@phosphor-icons/react";

const App = () => {
  return (
    <IconContext.Provider
      value={{
        color: "limegreen",
        size: 32,
        weight: "bold",
        mirrored: false,
      }}
    >
      <div>
        {/* All icons inherit: limegreen, 32px, bold */}
        <HorseIcon />
        <HeartIcon />
        <CubeIcon />

        {/* Override specific props while inheriting others */}
        <StarIcon color="gold" weight="fill" />

        {/* Nested context for different section */}
        <IconContext.Provider value={{ color: "crimson", size: 24, weight: "duotone" }}>
          <div>
            <HorseIcon /> {/* crimson, 24px, duotone */}
            <HeartIcon /> {/* crimson, 24px, duotone */}
          </div>
        </IconContext.Provider>
      </div>
    </IconContext.Provider>
  );
};

```

--------------------------------

### Customizing Phosphor Icons with Props

Source: https://context7.com/phosphor-icons/react/llms.txt

Illustrates the various props available for customizing Phosphor icon components, including color, size, weight, mirroring, and accessibility text. Standard SVG props are also supported.

```tsx
import { StarIcon } from "@phosphor-icons/react";

const IconPropsExample = () => {
  return (
    <div>
      {/* color: any CSS color string */}
      <StarIcon color="gold" />
      <StarIcon color="#FFD700" />
      <StarIcon color="rgb(255, 215, 0)" />
      <StarIcon color="currentColor" />

      {/* size: number (pixels) or string with units */}
      <StarIcon size={24} />
      <StarIcon size="2em" />
      <StarIcon size="100%" />

      {/* weight: thin | light | regular | bold | fill | duotone */}
      <StarIcon weight="thin" />
      <StarIcon weight="light" />
      <StarIcon weight="regular" />
      <StarIcon weight="bold" />
      <StarIcon weight="fill" />
      <StarIcon weight="duotone" />

      {/* mirrored: flip horizontally for RTL languages */}
      <StarIcon mirrored />

      {/* alt: accessible text for the icon */}
      <StarIcon alt="Favorite" />

      {/* Standard SVG props are also supported */}
      <StarIcon
        className="icon-class"
        style={{ verticalAlign: "middle" }}
        onClick={() => console.log("clicked")}
        aria-label="Rating star"
      />
    </div>
  );
};

```

--------------------------------

### Creating Custom Icons with Phosphor React

Source: https://context7.com/phosphor-icons/react/llms.txt

Extend Phosphor Icons by creating custom components using `IconBase` for CSR or `SSRBase` for SSR. Icons should be designed on a 256x256 grid, and path data must be provided for each weight variant.

```tsx
import { forwardRef, ReactElement } from "react";
import { Icon, IconBase, IconWeight } from "@phosphor-icons/react";

// Define SVG paths for each weight variant
const weights = new Map<IconWeight, ReactElement>([
  ["thin", <path d="M128 24v208M24 128h208" strokeWidth="8" />],
  ["light", <path d="M128 24v208M24 128h208" strokeWidth="12" />],
  ["regular", <path d="M128 24v208M24 128h208" strokeWidth="16" />],
  ["bold", <path d="M128 24v208M24 128h208" strokeWidth="24" />],
  ["fill", <path d="M128 24v208M24 128h208" strokeWidth="16" />],
  [
    "duotone",
    <>
      <circle cx="128" cy="128" r="96" opacity="0.2" />
      <path d="M128 24v208M24 128h208" strokeWidth="16" />
    </>,
  ],
]);

// Create the custom icon component
const CustomPlusIcon: Icon = forwardRef((props, ref) => (
  <IconBase ref={ref} {...props} weights={weights} />
));

CustomPlusIcon.displayName = "CustomPlusIcon";

// Usage
const App = () => (
  <div>
    <CustomPlusIcon size={32} color="blue" weight="bold" />
    <CustomPlusIcon size={48} color="green" weight="duotone" />
  </div>
);

export default CustomPlusIcon;

```

--------------------------------

### Usage in React Server Components and SSR

Source: https://github.com/phosphor-icons/react/blob/master/README.md

Explains how to import Phosphor Icons for use in Server Components or SSR environments where the Context API is not available. Icons should be imported from the `/ssr` submodule to avoid reliance on React Context. These variants do not inherit styles from an ancestor `IconContext`.

```tsx
import { FishIcon } from "@phosphor-icons/react/ssr";

const MyServerComponent = () => {
  return <FishIcon weight="duotone" />;
};

```

--------------------------------

### TypeScript Types for Phosphor Icons in React

Source: https://context7.com/phosphor-icons/react/llms.txt

Illustrates the usage of TypeScript types exported by the library for props, weights, and icon components. This ensures type safety when defining and using icons within React components.

```tsx
import type { Icon, IconProps, IconWeight } from "@phosphor-icons/react";
import { HeartIcon, StarIcon } from "@phosphor-icons/react";

// IconWeight type for weight validation
const weights: IconWeight[] = ["thin", "light", "regular", "bold", "fill", "duotone"];

// IconProps for component props typing
interface RatingProps {
  rating: number;
  iconProps?: IconProps;
}

const Rating = ({ rating, iconProps }: RatingProps) => {
  return (
    <div>
      {[1, 2, 3, 4, 5].map((star) => (
        <StarIcon
          key={star}
          weight={star <= rating ? "fill" : "regular"}
          color={star <= rating ? "gold" : "gray"}
          {...iconProps}
        />
      ))}
    </div>
  );
};

// Icon type for dynamic icon components
const IconButton = ({ icon: IconComponent, label }: { icon: Icon; label: string }) => (
  <button aria-label={label}>
    <IconComponent size={20} />
  </button>
);

const App = () => (
  <div>
    <Rating rating={4} iconProps={{ size: 24 }} />
    <IconButton icon={HeartIcon} label="Like" />
  </div>
);
```

--------------------------------

### Compose Icons with SVG Elements for Animation

Source: https://github.com/phosphor-icons/react/blob/master/README.md

Shows how to add custom SVG elements, such as `<animate>` and `<animateTransform>`, as children of Phosphor icon components. This allows for dynamic effects like rotation and pulsing directly on the icons.

```jsx
const RotatingCube = () => {
  return (
    <CubeIcon color="darkorchid" weight="duotone">
      <animate
        attributeName="opacity"
        values="0;1;0"
        dur="4s"
        repeatCount="indefinite"></animate>
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="rotate"
        dur="5s"
        from="0 0 0"
        to="360 0 0"
        repeatCount="indefinite"></animateTransform>
    </CubeIcon>
  );
};

```

--------------------------------

### Using SVG Children for Animations and Filters in Phosphor React

Source: https://context7.com/phosphor-icons/react/llms.txt

Icons in Phosphor React can accept valid SVG children, which render below the icon's content. This feature is useful for applying animations, filters, backgrounds, or other SVG modifications.

```tsx
import { CubeIcon, SpinnerGapIcon } from "@phosphor-icons/react";

const AnimatedIcons = () => {
  return (
    <div>
      {/* Rotating and pulsing cube */}
      <CubeIcon color="darkorchid" weight="duotone">
        <animate
          attributeName="opacity"
          values="0;1;0"
          dur="4s"
          repeatCount="indefinite"
        />
        <animateTransform
          attributeName="transform"
          attributeType="XML"
          type="rotate"
          dur="5s"
          from="0 0 0"
          to="360 0 0"
          repeatCount="indefinite"
        />
      </CubeIcon>

      {/* Spinner with CSS animation class */}
      <SpinnerGapIcon className="spin-animation" size={32} />

      {/* Icon with custom title element */}
      <CubeIcon color="royalblue" weight="bold">
        <title>3D Cube Object</title>
      </CubeIcon>
    </div>
  );
};

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.