### Start the example app packager

Source: https://github.com/duongdev/phosphor-react-native/blob/main/CONTRIBUTING.md

Starts the development server for the example application.

```sh
yarn example start
```

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

### Run example app on Web

Source: https://github.com/duongdev/phosphor-react-native/blob/main/CONTRIBUTING.md

Builds and runs the example application in a web browser.

```sh
yarn example web
```

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

### Install dependencies

Source: https://github.com/duongdev/phosphor-react-native/blob/main/CONTRIBUTING.md

Run this command in the root directory to install required dependencies.

```sh
yarn
```

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

### Installation

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/README.md

Install the phosphor-react-native library along with react-native-svg for icon rendering.

```APIDOC
## Installation

```bash
npm install phosphor-react-native react-native-svg
```
```

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

### Run example app on Android

Source: https://github.com/duongdev/phosphor-react-native/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator.

```sh
yarn example android
```

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

### Run example app on iOS

Source: https://github.com/duongdev/phosphor-react-native/blob/main/CONTRIBUTING.md

Builds and runs the example application on an iOS device or simulator.

```sh
yarn example ios
```

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

### Install Phosphor React Native

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/README.md

Install the library and its peer dependency react-native-svg using npm.

```bash
npm install phosphor-react-native react-native-svg
```

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

### Importing from 'phosphor-react-native'

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/05-module-exports.md

Demonstrates how to import types, context, and example icon components from the 'phosphor-react-native' package.

```typescript
import {
  // Types
  type Icon,
  type IconProps,
  type IconWeight,
  
  // Context
  IconContext,
  
  // Icon components (examples)
  HeartIcon,
  StarIcon,
  BellIcon,
  // ... plus 600+ additional icons
} from 'phosphor-react-native';
```

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

### Install phosphor-react-native dependencies

Source: https://github.com/duongdev/phosphor-react-native/blob/main/README.md

Install the package and its required peer dependency using yarn or npm.

```bash
yarn add phosphor-react-native react-native-svg
```

```bash
npm install --save phosphor-react-native react-native-svg
```

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

### Size Format Examples for Icons

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/09-quick-reference.md

Icons support various units for size, including numbers (logical pixels), strings without units, pixels, em, rem, points, and percentages.

```typescript
// All valid size values
<HeartIcon size={32} />          // Number (logical pixels)
<HeartIcon size="32" />          // String without units
<HeartIcon size="32px" />        // With pixel unit
<HeartIcon size="2em" />         // Em units
<HeartIcon size="1.5rem" />      // Rem units
<HeartIcon size="24pt" />        // Points
<HeartIcon size="100%" />        // Percentage
```

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

### Tree-Shaking Example

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/08-architecture.md

Illustrates how importing only specific icons, like `HeartIcon`, allows bundlers to remove all other unused icon definitions and their associated code.

```typescript
// Only Heart imported
import { HeartIcon } from 'phosphor-react-native';

// Bundler can remove:
// - Star icon and its defs
// - Bell icon and its defs
// - All other unused icons
```

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

### Icon Weight Selection UI

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/07-patterns-best-practices.md

Create a user interface for selecting an icon's weight. This example displays an icon and a row of pressable elements, each representing a different weight.

```typescript
import { useState } from 'react';
import { View, Pressable, Text } from 'react-native';
import { HeartIcon, type IconWeight } from 'phosphor-react-native';

export function WeightSelector() {
  const [weight, setWeight] = useState<IconWeight>('regular');
  const weights: IconWeight[] = ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'];

  return (
    <View>
      <HeartIcon weight={weight} size={64} />
      <View style={{ flexDirection: 'row', marginTop: 10 }}>
        {weights.map((w) => (
          <Pressable
            key={w}
            onPress={() => setWeight(w)}
            style={{
              padding: 8,
              marginHorizontal: 4,
              backgroundColor: weight === w ? 'blue' : 'lightgray',
              borderRadius: 4,
            }}>
            <Text>{w}</Text>
          </Pressable>
        ))}
      </View>
    </View>
  );
}
```

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

### Install Phosphor React Native

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/09-quick-reference.md

Install the Phosphor React Native library and its peer dependency react-native-svg using npm or yarn.

```bash
npm install phosphor-react-native react-native-svg
# or
yarn add phosphor-react-native react-native-svg
```

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

### Render and Test an Icon

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/09-quick-reference.md

Demonstrates how to render an icon component and assert its presence using testing utilities. Ensure '@testing-library/react-native' is installed for this functionality.

```typescript
import { render } from '@testing-library/react-native';
import { HeartIcon } from 'phosphor-react-native';

test('renders icon', () => {
  const { getByTestId } = render(<HeartIcon />);
  const icon = getByTestId('phosphor-react-native-heart-regular');
  expect(icon).toBeTruthy();
});
```

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

### Color Format Examples for Icons

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/09-quick-reference.md

Icons can accept colors in various formats including hex, named colors, RGB(A), and HSL. All provided formats are equivalent.

```typescript
// All equivalent ways to specify colors
<HeartIcon color="#FF0000" />        // Hex
<HeartIcon color="#F00" />           // Hex shorthand
<HeartIcon color="red" />            // Named color
<HeartIcon color="rgb(255,0,0)" />   // RGB
<HeartIcon color="rgba(255,0,0,1)" /> // RGBA
<HeartIcon color="hsl(0,100%,50%)" /> // HSL
```

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

### Generated Icon Component Optimization

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/08-architecture.md

Shows an example of a generated icon component that is automatically wrapped with `React.memo`, ensuring performance benefits without manual intervention.

```typescript
const I: Icon = React.memo(({ ...props }: IconProps) => (
  <IconBase {...props} weights={weights} name="heart" />
));
```

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

### Named Imports with Tree-Shaking

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/05-module-exports.md

Recommended for tree-shakeable imports, this method only includes the specified icons in your bundle. This example shows importing and using HeartIcon and StarIcon.

```typescript
import { HeartIcon, StarIcon } from 'phosphor-react-native';

export function IconDemo() {
  return (
    <>
      <HeartIcon size={32} />
      <StarIcon size={32} />
    </>
  );
}
```

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

### Interactive Icon with onPress Prop

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/04-icon-base.md

Example of an interactive icon component that accepts an 'onPress' prop for handling click events.

```typescript
<HeartIcon
  onPress={() => console.log('Clicked!')}
  color="red"
/>
```

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

### Build Output Structure

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/06-configuration.md

Illustrates the directory structure after a successful build using 'bob build'. Shows organized output for commonjs, module, and typescript formats.

```text
```
lib/
├── commonjs/
│   ├── index.js
│   ├── index.d.ts
│   ├── lib/
│   ├── icons/
│   ├── defs/
│   └── package.json
├── module/
│   ├── index.js
│   ├── lib/
│   ├── icons/
│   └── defs/
└── typescript/
    ├── index.d.ts
    ├── lib/
    ├── icons/
    └── defs/
```
```

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

### Demonstrate Icon Properties Usage

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/02-types.md

Illustrates various ways to utilize the `IconProps` to customize icon appearance and behavior. This includes setting colors, sizes, weights, mirroring for RTL, duotone specifics, and accessibility attributes.

```typescript
import { CubeIcon } from 'phosphor-react-native';

export function IconPropsDemo() {
  return (
    <>
      {/* Basic color and size */}
      <CubeIcon color="#FF5733" size={40} />

      {/* Different weight styles */}
      <CubeIcon color="blue" weight="bold" size={32} />

      {/* RTL mirrored variant */}
      <CubeIcon color="green" mirrored={true} />

      {/* Duotone with custom secondary color and opacity */}
      <CubeIcon
        weight="duotone"
        color="purple"
        duotoneColor="yellow"
        duotoneOpacity={0.5}
      />

      {/* With accessibility labels and test ID */}
      <CubeIcon
        title="3D Cube Icon"
        titleId="cube-title"
        testID="my-cube-icon"
      />

      {/* With inline styles */}
      <CubeIcon
        size={48}
        style={{ marginHorizontal: 8, opacity: 0.8 }}
      />
    </>
  );
}
```

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

### Basic Icon Usage

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/00-index.md

Demonstrates how to import and render a basic icon with custom color and size.

```typescript
import { HeartIcon } from 'phosphor-react-native';

export function FavoriteIcon() {
  return <HeartIcon color="red" size={32} />;
}
```

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

### Primary Entry Point

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/05-module-exports.md

The main entry point exports all types, context, and icon components from the `phosphor-react-native` package.

```APIDOC
## Primary Entry Point

**File:** `src/index.tsx` (generated)

The main entry point exports all types, context, and icon components:

```typescript
export { type Icon, type IconProps, IconContext, type IconWeight } from './lib';
export * from './icons/[AllIconComponents]';
```
```

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

### Icon Rendering Pipeline

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/08-architecture.md

Illustrates the step-by-step process of rendering an icon component, from initial props to the final SVG output.

```markdown
<HeartIcon color="red" size={32} weight="bold" />
    ↓
HeartIcon component (from src/icons/Heart.tsx)
    ↓
<IconBase weights={weightsMap} name="heart" {...props} />
    ↓
Read from IconContext for defaults
    ↓
Resolve props: props > context > defaults
    ↓
<Svg viewBox="0 0 256 256" color="red" width={32} height={32}>
  <G fill="red">
    {weightsMap.get('bold')}  // <Path d="..." />
  </G>
</Svg>
```

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

### Publish new version

Source: https://github.com/duongdev/phosphor-react-native/blob/main/CONTRIBUTING.md

Uses release-it to handle version bumping and publishing to npm.

```sh
yarn release
```

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

### Demonstrate Icon Weight Variants

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/02-types.md

Shows how to render the same icon using different `IconWeight` variants. Each variant applies a distinct visual style to the icon.

```typescript
import { HorseIcon } from 'phosphor-react-native';

// Each weight renders the same icon with different styles
export function IconWeightDemo() {
  return (
    <>
      <HorseIcon weight="thin" />      {/* Thin lines */}
      <HorseIcon weight="light" />     {/* Light lines */}
      <HorseIcon weight="regular" />   {/* Regular (default) */}
      <HorseIcon weight="bold" />      {/* Bold lines */}
      <HorseIcon weight="fill" />      {/* Solid filled */}
      <HorseIcon weight="duotone" />   {/* Two colors */}
    </>
  );
}
```

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

### Run unit tests

Source: https://github.com/duongdev/phosphor-react-native/blob/main/CONTRIBUTING.md

Executes the project's unit test suite.

```sh
yarn test
```

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

### Named Exports from Main Entry

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/05-module-exports.md

Demonstrates how to import various components, types, and context from the `phosphor-react-native` package.

```APIDOC
## Named Exports from Main Entry

### From 'phosphor-react-native'

```typescript
import {
  // Types
  type Icon,
  type IconProps,
  type IconWeight,
  
  // Context
  IconContext,
  
  // Icon components (examples)
  HeartIcon,
  StarIcon,
  BellIcon,
  // ... plus 600+ additional icons
} from 'phosphor-react-native';
```
```

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

### Simple Icon Weight Toggle

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/07-patterns-best-practices.md

Toggle the weight of an icon dynamically using React's useState hook. This example cycles through available weights on button press.

```typescript
import { useState } from 'react';
import { Button } from 'react-native';
import { HeartIcon, type IconWeight } from 'phosphor-react-native';

export function WeightToggle() {
  const [weight, setWeight] = useState<IconWeight>('regular');

  const nextWeight = (): IconWeight => {
    const weights: IconWeight[] = ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'];
    const idx = weights.indexOf(weight);
    return weights[(idx + 1) % weights.length];
  };

  return (
    <>
      <HeartIcon weight={weight} size={48} />
      <Button title={`Change to ${nextWeight()}`} onPress={() => setWeight(nextWeight())} />
    </>
  );
}
```

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

### Set Up Icon Context

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/09-quick-reference.md

Use IconContext.Provider to set default values for color, size, and weight for all nested icons. Individual icons can override these defaults.

```typescript
import { IconContext, HeartIcon } from 'phosphor-react-native';

<IconContext.Provider value={{ color: 'blue', size: 32, weight: 'bold' }}>
  <HeartIcon /> {/* Inherits context values */}
  <HeartIcon color="red" /> {/* Overrides color */}
</IconContext.Provider>
```

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

### Importing Phosphor Icons

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/09-quick-reference.md

Demonstrates various methods for importing Phosphor icons, including single imports for tree-shaking, multiple imports, importing all icons, and direct imports.

```typescript
// Single import (tree-shakeable)
import { HeartIcon } from 'phosphor-react-native';

// Multiple imports
import { HeartIcon, StarIcon, BellIcon } from 'phosphor-react-native';

// All icons (not tree-shakeable)
import * as Icons from 'phosphor-react-native';

// Direct import (tree-shakeable)
import { HeartIcon } from 'phosphor-react-native/src/icons/Heart';
```

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

### Internal Icon Component Structure

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/04-icon-base.md

Generated icon components utilize IconBase, passing a map of weight variants, the icon's name, and other props. This example shows the typical structure of a generated icon component.

```typescript
// Example from src/icons/Heart.tsx (generated)
import { type Icon } from 'phosphor-react-native';
import IconBase from '../lib/icon-base';
import weights from '../defs/Heart'; // Map of weight variants

const I: Icon = ({ ...props }: IconProps) => (
  <IconBase {...props} weights={weights} name="heart" />
);

export { I as HeartIcon };
```

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

### Bulk Import Icons

Source: https://github.com/duongdev/phosphor-react-native/blob/main/README.md

Import all icons at once. Note that this may impact tree-shaking and increase bundle size depending on the bundler.

```tsx
import * as Icon from "phosphor-react-native";
...
<Icon.SmileyIcon />
<Icon.FolderIcon weight="thin" />
<Icon.BatteryHalfIcon size="24px" />
<Icon.AirplaneTakeoffIcon size="24px" mirrored={true} />
```

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

### Performance Tip: Use Context for Defaults

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/09-quick-reference.md

Utilize `IconContext.Provider` to supply default values for `size` and `color` to all child icon components, simplifying usage and improving performance.

```typescript
<IconContext.Provider value={{ size: 24, color: 'blue' }}>
  {/* All children inherit values */}
</IconContext.Provider>
```

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

### Displaying Multiple Icon Weights

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/00-index.md

Shows how to render the same icon with different predefined weights (thin, light, regular, bold, fill, duotone).

```typescript
import { HeartIcon } from 'phosphor-react-native';

export function IconShowcase() {
  return (
    <>
      <HeartIcon weight="thin" />
      <HeartIcon weight="light" />
      <HeartIcon weight="regular" />
      <HeartIcon weight="bold" />
      <HeartIcon weight="fill" />
      <HeartIcon weight="duotone" />
    </>
  );
}
```

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

### Package Metadata Configuration

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/06-configuration.md

Defines essential package information such as name, version, description, and entry points for different module systems.

```json
{
  "name": "phosphor-react-native",
  "version": "3.0.6",
  "description": "Flexible icons for React Native",
  "main": "lib/commonjs/index.js",
  "module": "lib/module/index.js",
  "types": "lib/typescript/index.d.ts",
  "react-native": "src/index.tsx",
  "source": "src/index"
}
```

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

### Release-it Configuration for package.json

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/06-configuration.md

Configures release-it for automating Git tagging, npm publishing, GitHub releases, and changelog generation. Ensures consistent versioning and release processes.

```json
{
  "release-it": {
    "git": {
      "commitMessage": "chore: release ${version}",
      "tagName": "v${version}"
    },
    "npm": {
      "publish": true
    },
    "github": {
      "release": true
    },
    "plugins": {
      "@release-it/conventional-changelog": {
        "preset": "angular"
      }
    }
  }
}
```

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

### Configure Tree-Shaking with sideEffects: false

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/08-architecture.md

A package.json configuration that informs bundlers that all modules are pure and can be safely removed if unused, optimizing bundle size.

```json
{
  "sideEffects": false
}
```

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

### Provider Nesting in Icon Context

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/08-architecture.md

Demonstrates how nested context providers work, where the nearest provider's values take precedence. This allows for localized theme or style overrides.

```typescript
<IconContext.Provider value={{ color: 'red' }}>
  <Icon /> {/* Uses red */}
  
  <IconContext.Provider value={{ color: 'blue' }}>
    <Icon /> {/* Uses blue */}
  </IconContext.Provider>
  
  <Icon /> {/* Back to red */}
</IconContext.Provider>
```

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

### Namespace Import for All Icons

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/05-module-exports.md

Use this method to import all icons at once. It is less efficient for tree-shaking and should only be used when necessary.

```typescript
import * as Icons from 'phosphor-react-native';

export function IconGallery() {
  return (
    <>
      <Icons.HeartIcon size={32} />
      <Icons.StarIcon size={32} />
    </>
  );
}
```

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

### Tree-Shaking: Include Multiple Specific Icons

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/09-quick-reference.md

Shows how to import multiple specific icons in a single import statement, which is efficient for including a few icons without increasing bundle size unnecessarily.

```typescript
// ✓ Heart and Star included
import { HeartIcon, StarIcon } from 'phosphor-react-native';
```

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

### Tree-Shaking: Avoid Importing All Icons

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/09-quick-reference.md

Illustrates an inefficient way to import icons that includes all available icons, significantly increasing bundle size. Avoid using `import * as Icons` for performance reasons.

```typescript
// ✗ All ~700 icons included
import * as Icons from 'phosphor-react-native';
```

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

### Tree-Shaking Icon Imports

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/03-icon-components.md

Illustrates how to import icons to ensure tree-shaking is effective, minimizing bundle size. Importing individual icons or specific icons is recommended over importing all icons.

```typescript
// ✓ Tree-shakeable: Only Heart and Star included
import { HeartIcon, StarIcon } from 'phosphor-react-native';
```

```typescript
// ✓ Also tree-shakeable: Individual icon import
import { HeartIcon } from 'phosphor-react-native/src/icons/Heart';
```

```typescript
// ✗ Not tree-shakeable: All icons imported (use only if needed)
import * as AllIcons from 'phosphor-react-native';
```

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

### Optimize Bundle Size with Tree-Shaking

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/00-index.md

Import only the necessary icon components to enable tree-shaking and reduce bundle size.

```typescript
import { HeartIcon } from 'phosphor-react-native'; // ✓ Tree-shakeable
```

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

### Primary Entry Point Exports

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/05-module-exports.md

Exports all types, context, and icon components from the main entry point of the library.

```typescript
export { type Icon, type IconProps, IconContext, type IconWeight } from './lib';
export * from './icons/[AllIconComponents]';
```

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

### Basic IconContext Usage

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/01-icon-context.md

Demonstrates how to wrap a view with IconContext.Provider to apply default styles (color, size, weight) to all descendant icons. Individual icon props can override these defaults.

```typescript
import React from 'react';
import { View } from 'react-native';
import { IconContext, HeartIcon, StarIcon, BellIcon } from 'phosphor-react-native';

export default function App() {
  return (
    <IconContext.Provider
      value={{
        color: 'blue',
        size: 32,
        weight: 'bold',
        mirrored: false,
      }}>
      <View>
        {/* All icons below inherit the provider values */}
        <HeartIcon />        {/* blue, 32px, bold weight */}
        <StarIcon />         {/* blue, 32px, bold weight */}
        <BellIcon />         {/* blue, 32px, bold weight */}

        {/* Props on individual icons override context */}
        <HeartIcon color="red" size={48} /> {/* red, 48px, bold weight */}
      </View>
    </IconContext.Provider>
  );
}
```

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

### Import All Phosphor React Native Icons

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/00-index.md

Shows how to import all icons from Phosphor React Native using a namespace import. This method is not tree-shakeable.

```typescript
import * as Icons from 'phosphor-react-native';
```

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

### Using IconContext for Theming

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/README.md

Provide global icon styles like size and color using IconContext.Provider. Child icon components will inherit these values unless overridden.

```typescript
import { IconContext, HeartIcon, StarIcon } from 'phosphor-react-native';

export function App() {
  return (
    <IconContext.Provider value={{ size: 32, color: 'blue' }}>
      <HeartIcon />
      <StarIcon />
    </IconContext.Provider>
  );
}
```

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

### Performance Tip: Memoize Icon Lists

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/09-quick-reference.md

Memoize icon lists using `useMemo` to prevent unnecessary re-renders when passing icon components as props or within lists.

```typescript
const ICON_MAP = useMemo(() => ({ heart: HeartIcon }), []);
```

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

### Basic Usage

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/README.md

Import and use individual icon components directly in your React Native application.

```APIDOC
## Basic Usage

### Description
Import and use individual icon components directly in your React Native application.

### Code Example

```typescript
import { HeartIcon } from 'phosphor-react-native';

export function App() {
  return <HeartIcon color="red" size={32} weight="fill" />;
}
```
```

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

### npm Scripts Reference

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/06-configuration.md

Defines various scripts for development tasks such as testing, linting, formatting, releasing, and building. These scripts automate common development workflows.

```json
{
  "scripts": {
    "test": "jest",
    "typescript": "tsc --noEmit",
    "lint": "eslint . --fix",
    "release": "release-it",
    "format": "prettier --write src/**/* src/lib/index.tsx",
    "generate": "node generator/generate-svg.mjs",
    "bundle-bench": "node scripts/bundle-bench.mjs",
    "postbuild": "node -e \"...\"",
    "prepare": "husky && touch src/index.tsx && bob build"
  }
}
```

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

### Import Phosphor React Native Icons

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/00-index.md

Demonstrates recommended tree-shakeable named imports for single or multiple icons from the Phosphor React Native library.

```typescript
import { HeartIcon } from 'phosphor-react-native';
```

```typescript
import { HeartIcon, StarIcon } from 'phosphor-react-native';
```

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

### Prettier Configuration in package.json

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/06-configuration.md

Defines formatting rules for Prettier, including quote style, indentation, and trailing commas. Ensures consistent code style across the project.

```json
{
  "prettier": {
    "quoteProps": "consistent",
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "es5",
    "useTabs": false
  }
}
```

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

### Package.json Export Conditions

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/05-module-exports.md

Defines the entry points and module resolution strategies for different environments and module systems, including import and require paths for types and JavaScript bundles.

```json
{
  "exports": {
    ".": {
      "import": {
        "types": "./lib/typescript/index.d.ts",
        "default": "./lib/module/index.js"
      },
      "require": {
        "types": "./lib/typescript/index.d.ts",
        "default": "./lib/commonjs/index.js"
      }
    },
    "./src/icons/*": {
      "react-native": "./src/icons/*.tsx",
      "import": "./src/icons/*.tsx",
      "require": "./src/icons/*.tsx"
    }
  },
  "react-native": "src/index.tsx",
  "main": "lib/commonjs/index.js",
  "module": "lib/module/index.js",
  "types": "lib/typescript/index.d.ts"
}
```

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

### Import Icon Types

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/09-quick-reference.md

Import necessary types for defining icon properties and context.

```typescript
import { type Icon, type IconProps, type IconWeight, IconContext } from 'phosphor-react-native';
```

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

### Build Targets Configuration

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/06-configuration.md

Specifies the build process using `react-native-builder-bob`, defining source and output directories, and the target formats (CommonJS, ES Module, TypeScript).

```json
{
  "react-native-builder-bob": {
    "source": "src",
    "output": "lib",
    "targets": [
      ["commonjs", { "sourceMaps": false }],
      "module",
      ["typescript", { "tsc": "./node_modules/typescript/bin/tsc" }]
    ]
  }
}
```

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

### Context Resolution for Icon Defaults

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/08-architecture.md

Demonstrates how default values for color, size, and weight are retrieved from the IconContext.

```typescript
const {
  color: contextColor = '#000',
  size: contextSize = 24,
  weight: contextWeight = 'regular',
  // ... other defaults
} = useContext(IconContext);
```

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

### Configure IconContext Defaults

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/02-types.md

Shows how to provide default props for icons using IconContext. Any icon component rendered within this provider will inherit the specified color, size, and weight.

```typescript
import { IconContext, type IconWeight, type IconProps } from 'phosphor-react-native';

const defaultProps: IconProps = {
  color: 'teal',
  size: 32,
  weight: 'regular' as IconWeight,
};

<IconContext.Provider value={defaultProps}>
  {/* All icons inherit these defaults */}
</IconContext.Provider>
```

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

### Tree-Shaking: Include Specific Icons

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/09-quick-reference.md

Demonstrates how to import only the specific icons needed to optimize bundle size. This method ensures that only the declared icons are included in the final build.

```typescript
// ✓ Only Heart included
import { HeartIcon } from 'phosphor-react-native';
```

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

### Direct Icon Import for Maximum Tree-Shaking

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/05-module-exports.md

Import individual icons directly from their specific paths for maximum tree-shaking compatibility. The JavaScript compiled version is also shown.

```typescript
// TypeScript
import { HeartIcon } from 'phosphor-react-native/src/icons/Heart';
```

```javascript
// JavaScript (compiled)
import { HeartIcon } from 'phosphor-react-native/lib/commonjs/icons/Heart';
```

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

### Create Icon Context

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/08-architecture.md

Defines the default context for icons, providing default values for color, size, weight, and other properties.

```typescript
export const IconContext = createContext<IconProps>({
  color: '#000',
  size: 24,
  weight: 'regular',
  mirrored: false,
  duotoneOpacity: 0.2,
});
```

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

### Use a Specific Icon

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/00-index.md

Import and render a specific icon component. Customize its color and size.

```typescript
import { HeartIcon } from 'phosphor-react-native';
<HeartIcon color="red" size={32} weight="fill" />
```

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

### Basic Icon Usage in React Native

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/README.md

Import and render an icon component with specified color, size, and weight. Ensure the component is correctly imported from 'phosphor-react-native'.

```typescript
import { HeartIcon } from 'phosphor-react-native';

export function App() {
  return <HeartIcon color="red" size={32} weight="fill" />;
}
```

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

### Create an Icon with Badge Wrapper

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/07-patterns-best-practices.md

This pattern provides a flexible `IconWithBadge` component that takes an icon component, badge count, size, and color. It renders the icon and overlays a badge using a `BadgeDot` sub-component.

```typescript
import { View } from 'react-native';
import { type Icon } from 'phosphor-react-native';

interface IconWithBadgeProps {
  icon: Icon;
  badge?: number;
  size?: number;
  color?: string;
}

export function IconWithBadge({ icon: IconComponent, badge, size = 24, color = 'black' }: IconWithBadgeProps) {
  return (
    <View style={{ position: 'relative', width: size, height: size }}>
      <IconComponent size={size} color={color} />
      {badge && <BadgeDot count={badge} />}
    </View>
  );
}

function BadgeDot({ count }: { count: number }) {
  return (
    <View style={{
      position: 'absolute',
      top: -4,
      right: -4,
      backgroundColor: 'red',
      borderRadius: 8,
      minWidth: 16,
      height: 16,
      justifyContent: 'center',
      alignItems: 'center',
    }}>
      <Text style={{ color: 'white', fontSize: 10 }}>{count}</Text>
    </View>
  );
}
```

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

### Apply Color Themes with IconContext

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/07-patterns-best-practices.md

Use IconContext.Provider to set a global theme for icons. Define themes with colors and sizes, then consume them in child components. This is useful for managing consistent theming across your application.

```typescript
import { StyleSheet } from 'react-native';
import { IconContext, HeartIcon, StarIcon } from 'phosphor-react-native';

const THEMES = {
  light: { color: '#333', size: 24 },
  dark: { color: '#FFF', size: 24 },
  colorful: { color: '#FF5733', size: 32 },
} as const;

type Theme = keyof typeof THEMES;

interface ThemedIconsProps {
  theme: Theme;
}

export function ThemedIcons({ theme }: ThemedIconsProps) {
  return (
    <IconContext.Provider value={THEMES[theme]}>
      <View>
        <HeartIcon />
        <StarIcon />
      </View>
    </IconContext.Provider>
  );
}

// Usage
<ThemedIcons theme="dark" />
```

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

### Correct Import for Context and Types

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/05-module-exports.md

Always import context and types from the main entry point 'phosphor-react-native' for cleaner and more maintainable code.

```typescript
// ✓ Correct
import { IconContext, type IconProps, type IconWeight } from 'phosphor-react-native';
```

```typescript
// ✗ Avoid (longer path)
import { IconContext } from 'phosphor-react-native/src/lib';
```

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

### TypeScript Configuration (tsconfig.json)

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/06-configuration.md

Main TypeScript configuration file. Sets up JSX transform, module resolution, strict checks, and path aliases for development.

```json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "lib": ["esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "target": "esnext",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "paths": {
      "phosphor-react-native": ["./src/index"]
    }
  },
  "exclude": ["bundle-bench", "example", "core"]
}
```

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

### Prop Value Selection Logic

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/08-architecture.md

Explains the precedence for selecting prop values: received prop, context value, or hardcoded default.

```plaintext
- For each prop: `receivedProp ?? contextValue ?? hardDefault`
- Example: `color ?? contextColor ?? '#000'`
```

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

### Performance Tip: Use Named Imports

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/09-quick-reference.md

Use named imports from 'phosphor-react-native' to enable tree-shaking and reduce bundle size. Avoid importing the entire library.

```typescript
// ✓ Good
import { HeartIcon } from 'phosphor-react-native';

// ✗ Avoid
import * as Icons from 'phosphor-react-native';
```

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

### Responsive Icon Sizing with Window Dimensions

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/07-patterns-best-practices.md

Dynamically adjust icon sizes based on screen dimensions using the useWindowDimensions hook. This ensures icons scale appropriately across different devices.

```typescript
import { useWindowDimensions } from 'react-native';
import { IconContext, HeartIcon, StarIcon } from 'phosphor-react-native';

export function ResponsiveIcons() {
  const { width } = useWindowDimensions();
  const iconSize = width < 500 ? 20 : 32;

  return (
    <IconContext.Provider value={{ size: iconSize }}>
      <View>
        <HeartIcon />
        <StarIcon />
      </View>
    </IconContext.Provider>
  );
}
```

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

### Implement RTL Support

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/00-index.md

Use the 'mirrored' prop to adjust icon orientation for Right-to-Left (RTL) layouts.

```typescript
<ArrowIcon mirrored={isRTL} />
```

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

### Dynamic Import for Runtime Icon Loading

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/05-module-exports.md

This method allows for dynamic loading of icons at runtime, based on a variable icon name. It uses dynamic import syntax.

```typescript
async function loadIcon(iconName: string) {
  const module = await import(`phosphor-react-native/src/icons/${iconName}`);
  return module[`${iconName}Icon`];
}

const HeartIcon = await loadIcon('Heart');
```

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

### Verify TypeScript and ESLint

Source: https://github.com/duongdev/phosphor-react-native/blob/main/CONTRIBUTING.md

Runs type checking and linting to ensure code quality.

```sh
yarn typescript
yarn lint
```

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

### Icon Component Exports

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/05-module-exports.md

Details the naming convention and export pattern for individual icon components.

```APIDOC
## Icon Component Exports

Each icon component is exported with the "Icon" suffix in PascalCase:

**Example icon exports:**
- `AcornIcon`
- `PaletteIcon`
- `PencilLineIcon`
- `SwapIcon`
- `ListIcon`
- `TestTubeIcon`

All icons follow this pattern:

```typescript
// Generated at src/icons/{IconName}.tsx
export { I as {IconName}Icon };
```
```

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

### CommonJS Module Import

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/05-module-exports.md

Import icons using CommonJS syntax when targeting environments that support it.

```javascript
const { HeartIcon } = require('phosphor-react-native');
```

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

### Main Entry Point Aggregation

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/08-architecture.md

Aggregates all exported types and icon components into the main entry point of the library for easy access.

```typescript
export { type Icon, type IconProps, IconContext, type IconWeight } from './lib';
export * from './icons/Heart';
export * from './icons/Star';
export * from './icons/Bell';
// ... all other icons
```

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

### Icon Component Export Pattern

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/05-module-exports.md

Illustrates the pattern for exporting individual icon components, which are generated and suffixed with 'Icon'.

```typescript
// Generated at src/icons/{IconName}.tsx
export { I as {IconName}Icon };
```

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

### Icon with RTL Support

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/03-icon-components.md

Enable right-to-left mirroring for icons that support it by using the `mirrored` prop.

```typescript
import { AirplaneTakeoffIcon } from 'phosphor-react-native';

export function RTLIcon({ isRTL }) {
  return (
    <AirplaneTakeoffIcon
      size="24px"
      mirrored={isRTL}
    />
  );
}
```

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

### Icon with Duotone Styling

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/03-icon-components.md

Apply duotone styling to icons using `weight="duotone"` and optionally specify a secondary color and opacity with `duotoneColor` and `duotoneOpacity`.

```typescript
import { CellSignalIcon } from 'phosphor-react-native';

export function DuotoneIcon() {
  return (
    <CellSignalIcon
      weight="duotone"
      color="blue"
      duotoneColor="cyan"
      duotoneOpacity={0.4}
    />
  );
}
```

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

### Check Icon Name Import

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/09-quick-reference.md

Ensure you are importing the correct icon component. Deprecated names may cause issues.

```typescript
// Check if icon name is correct
import { HeartIcon } from 'phosphor-react-native'; // ✓ Correct
import { Heart } from 'phosphor-react-native';     // ✗ Deprecated
```

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

### Icon Component Wrapper Generation

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/08-architecture.md

Creates a thin wrapper component for each icon, abstracting the IconBase component and exporting the icon with a specific suffix.

```typescript
import { type Icon, type IconProps } from 'phosphor-react-native';
import IconBase from '../lib/icon-base';
import weights from '../defs/Heart';

const I: Icon = ({ ...props }: IconProps) => (
  <IconBase {...props} weights={weights} name="heart" />
);

export { I as HeartIcon };
```

```typescript
/** @deprecated Use HeartIcon */
export const Heart = I;
```

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

### Create an Icon Button Wrapper

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/07-patterns-best-practices.md

This pattern creates a reusable `IconButton` component that wraps a `Pressable` and an icon. It accepts standard `PressableProps` and allows customization of icon size and color.

```typescript
import { Pressable, PressableProps } from 'react-native';
import { type Icon } from 'phosphor-react-native';

interface IconButtonProps extends PressableProps {
  icon: Icon;
  size?: number;
  color?: string;
}

export function IconButton({ icon: Icon, size = 24, color = 'black', ...props }: IconButtonProps) {
  return (
    <Pressable {...props}>
      <Icon size={size} color={color} />
    </Pressable>
  );
}

// Usage
import { HeartIcon } from 'phosphor-react-native';

<IconButton icon={HeartIcon} onPress={handleFavorite} color="red" size={28} />
```

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

### Unsupported Weight-Specific Imports

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/05-module-exports.md

These import patterns are not supported. Weight selection should be done via the `weight` prop, not by importing from weight-specific subpaths.

```typescript
// ✗ Weight-specific imports (not exposed)
import { HeartIcon } from 'phosphor-react-native/bold';
```

```typescript
// ✗ Per-weight subpaths not exposed
import { HeartIcon } from 'phosphor-react-native/src/icons/Heart/bold';
```

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

### Weight Switching Logic

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/04-icon-base.md

Selects the appropriate icon weight variant based on the 'weight' prop or context. It handles 'duotone' variants differently, passing color and opacity props, while other weights are rendered within a 'G' wrapper.

```typescript
const selectedWeight = weight ?? contextWeight;

{selectedWeight === 'duotone' ? (
  // Duotone: call as function with color props
  weights.get(selectedWeight)({
    duotoneColor: duotoneColor ?? contextDuotoneColor,
    duotoneOpacity: duotoneOpacity ?? contextDuotoneOpacity,
  })
) : (
  // Other weights: render as element with G wrapper
  <G fill={color ?? contextColor}>
    {weights.get(selectedWeight) as ReactElement}
  </G>
)}
```

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

### Package Manager Configuration

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/06-configuration.md

Specifies that the project requires Yarn version 1.22.22 or higher. It is recommended to use Yarn for development and avoid npm.

```json
{
  "packageManager": "yarn@1.22.22"
}
```

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

### Style Multiple Icons Consistently

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/00-index.md

Use IconContext.Provider to apply consistent styling (size, color) to all nested icon components.

```typescript
<IconContext.Provider value={{ size: 32, color: 'blue' }}>
  <HeartIcon />
  <StarIcon />
</IconContext.Provider>
```

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

### Performance Tip: Extract Icon Components

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/09-quick-reference.md

Extract icon components into separate variables to store references, which can improve performance by avoiding repeated lookups.

```typescript
const MyIcon = HeartIcon; // Store reference
<MyIcon size={32} />       // Reuse
```

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

### Icon with Styling

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/03-icon-components.md

Apply various styling properties like color, weight, and size to Phosphor icons. Sizes can be specified as numbers or pixel strings.

```typescript
import { HeartIcon, CubeIcon } from 'phosphor-react-native';

export function StyledIcons() {
  return (
    <>
      {/* Red filled heart */}
      <HeartIcon color="#AE2983" weight="fill" size={32} />

      {/* Teal duotone cube */}
      <CubeIcon color="teal" weight="duotone" />

      {/* Responsive size using string */}
      <HeartIcon size="24px" color="pink" />
    </>
  );
}
```

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

### Style Duotone Icons

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/09-quick-reference.md

Customize duotone icons with specific colors and opacity for the two layers using 'color', 'duotoneColor', and 'duotoneOpacity' props.

```typescript
<HeartIcon
  weight="duotone"
  color="blue"
  duotoneColor="cyan"
  duotoneOpacity={0.5}
/>
```

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

### Individual Icon Imports

Source: https://github.com/duongdev/phosphor-react-native/blob/main/README.md

Import specific icons to avoid bundle size issues when tree-shaking is not supported.

```javascript
// Javascript
import { StarIcon } from "phosphor-react-native/lib/commonjs/icons/Star";

// Typescript
import { StarIcon } from 'phosphor-react-native/src/icons/Star';

<StarIcon size="24px" />
```

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

### Toggle Icon Weight Dynamically

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/03-icon-components.md

Demonstrates how to change the weight variant of an icon dynamically using React state and a touchable component. Ensure you import the necessary types and components.

```typescript
import { useState } from 'react';
import { TouchableOpacity } from 'react-native';
import { HeartIcon, type IconWeight } from 'phosphor-react-native';

export function WeightToggle() {
  const [weight, setWeight] = useState<IconWeight>('regular');

  const weights: IconWeight[] = ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'];

  return (
    <TouchableOpacity onPress={() => {
      const idx = weights.indexOf(weight);
      setWeight(weights[(idx + 1) % weights.length]);
    }}>
      <HeartIcon weight={weight} size={32} />
    </TouchableOpacity>
  );
}
```

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

### Memoize Icon List Rendering

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/07-patterns-best-practices.md

Use `useMemo` to memoize the mapping of icon items to their components. This prevents unnecessary re-renders of the icon list when the parent component re-renders but the `items` prop remains the same.

```typescript
import { useMemo } from 'react';
import { FlatList } from 'react-native';
import * as Icons from 'phosphor-react-native';

interface IconItem {
  id: string;
  name: keyof typeof Icons;
  label: string;
}

export function IconList({ items }: { items: IconItem[] }) {
  const iconComponents = useMemo(
    () => items.map((item) => ({
      ...item,
      Component: Icons[item.name] as React.FC<any>,
    })),
    [items]
  );

  return (
    <FlatList
      data={iconComponents}
      keyExtractor={(item) => item.id}
      renderItem={({ item: { Component, label } }) => (
        <View>
          <Component size={24} />
          <Text>{label}</Text>
        </View>
      )}
    />
  );
}
```

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

### Icon Performance Optimization with React.memo

Source: https://github.com/duongdev/phosphor-react-native/blob/main/_autodocs/03-icon-components.md

Shows the internal usage of React.memo for icon components, which prevents unnecessary re-renders when parent components update but icon props remain unchanged.

```typescript
// Internal implementation (simplified)
const IconBase = React.memo(function IconBase(props: IconBaseProps) {
  // Component logic
});
```