{"library":"phosphor-react","title":"Phosphor React Icons","description":"Phosphor React is a comprehensive icon library for React applications, providing a flexible and visually consistent icon family. The current stable version is 2.1.10, actively maintained with frequent minor and patch releases that add new icons, features, and bug fixes. Key differentiators include six distinct weights (thin, light, regular, bold, fill, duotone) for stylistic versatility, robust support for React Context to manage global icon styling, and full compatibility with standard SVG properties. The library is tree-shaking friendly, ensuring optimal bundle sizes, and offers official support for React Server Components (RSC) and server-side rendering (SSR) via a dedicated submodule. It also integrates JSDoc icon previews for enhanced developer experience.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install phosphor-react"],"cli":null},"imports":["import { HeartIcon } from '@phosphor-icons/react'","import { IconContext } from '@phosphor-icons/react'","import { FishIcon } from '@phosphor-icons/react/ssr'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { IconContext, HorseIcon, HeartIcon, CubeIcon } from '@phosphor-icons/react';\n\nconst App = () => {\n  return (\n    <IconContext.Provider\n      value={{\n        color: 'limegreen',\n        size: 32,\n        weight: 'bold',\n        mirrored: false,\n      }}\n    >\n      <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>\n        <h1>My Awesome Icons</h1>\n        <p>Icons inheriting context defaults:</p>\n        <HorseIcon /> {/* Will be lime-green, 32px, and bold! */}\n        <HeartIcon /> {/* Me too! */}\n        <CubeIcon /> {/* Me three :) */}\n\n        <p>Icons with overridden props:</p>\n        <HeartIcon color=\"#AE2983\" weight=\"fill\" size={48} />\n        <CubeIcon color=\"teal\" weight=\"duotone\" mirrored={true} />\n      </div>\n    </IconContext.Provider>\n  );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(<App />);","lang":"typescript","description":"Demonstrates importing individual icons, using `IconContext.Provider` for global styling, and overriding props on specific icons.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}