React

Overview

The document discusses the transition from the phosphor-react package to @phosphor-icons/react, highlighting improved performance and a smaller bundle size. It emphasizes the drop-in replacement ease due to unchanged APIs. The legacy package will continue to receive maintenance but won’t be updated with new icons. The installation process, usage tips, props information, and context usage in styling icons are also covered.

Features

• Improved Performance: @phosphor-icons/react offers enhanced performance.
• Smaller Bundle Size: The new version boasts a significantly smaller bundle size.
• Easy Replacement: No API changes make replacing the legacy package straightforward.
• Support for Tree-shaking: Phosphor supports tree-shaking to include only necessary icon code.
• Props Usage: Icon components accept a variety of props like color, size, weight, mirrored, and alt text.
• Context Utilization: Icon styling can be efficiently managed using React Context.
• Composability: Components allow for arbitrary SVG elements as children for enhanced customization.

Installation

To install the @phosphor-icons/react package, use the following steps:

1. Install the package using npm:

   npm install @phosphor-icons/react
   

2. Import the icons needed and include them in the render method.
3. For SSR environments or React Server Components, import icons from /dist/ssr submodule.

Summary

The document introduces the transition from phosphor-react to @phosphor-icons/react, highlighting performance improvements and a smaller bundle size. It emphasizes seamless replacement due to unchanged APIs and offers insights into props usage, context utilization for styling icons, and the package’s composability. Overall, the new package presents a more efficient and user-friendly icon solution for various applications.