### Install Phosphor Icons Svelte

Source: https://github.com/babakfp/phosphor-icons-svelte/blob/main/README.md

Use this command to add the latest version of the library to your project.

```bash
pnpm add -D phosphor-icons-svelte
```

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

### Install Phosphor Icons Svelte

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

Install the package as a dev dependency. Requires Svelte 5 or later.

```bash
# Svelte 5+ (current)
pnpm add -D phosphor-icons-svelte

# Svelte 4 or earlier (legacy)
pnpm add -D phosphor-icons-svelte@1.1.2
```

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

### Install Older Version of Phosphor Icons Svelte

Source: https://github.com/babakfp/phosphor-icons-svelte/blob/main/README.md

If you are using an older version of Svelte (4 or earlier), install version 1.1.2 instead.

```bash
pnpm add -D phosphor-icons-svelte@1.1.2
```

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

### RTL Text Direction Icon Mirroring

Source: https://github.com/babakfp/phosphor-icons-svelte/blob/main/README.md

CSS example demonstrating how icons with `data-phosphor-icon` attribute are mirrored for right-to-left text direction.

```css
[dir="rtl"] [data-phosphor-icon="heart"] {
    transform: scaleX(-1);
}
```

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

### Svelte Icon Component Naming Convention

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

Phosphor Icons Svelte components follow the pattern 'Icon' + PascalCase(icon-name) + PascalCase(weight). This example shows correct individual imports for different weights of the same icon.

```svelte
<script>
    // Correct: individual per-weight imports
    import IconArrowRightRegular from "phosphor-icons-svelte/IconArrowRightRegular.svelte"
    import IconArrowRightBold from "phosphor-icons-svelte/IconArrowRightBold.svelte"

    // INCORRECT — do not use barrel imports (imports ALL 9,072 icons):
    // import { Heart } from "phosphor-icons-svelte"
</script>

<IconArrowRightRegular />
<IconArrowRightBold />
```

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

### Alternative Icon Import Syntax (Not Recommended)

Source: https://github.com/babakfp/phosphor-icons-svelte/blob/main/README.md

This syntax is shown for comparison but is not recommended due to potential performance issues, as it can lead to importing all icons at once.

```svelte
<script>
    import { Heart, HeartBreak } from "phosphor-icons-svelte"
</script>

<Heart />
<HeartBreak weight="bold" />
```

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

### Import and Render Phosphor Icons

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

Import individual icon components from their specific file paths. Component names follow the pattern `Icon{Name}{Weight}`.

```svelte
<script>
    // Regular weight
    import IconHeartRegular from "phosphor-icons-svelte/IconHeartRegular.svelte"
    // Bold weight
    import IconHeartBreakBold from "phosphor-icons-svelte/IconHeartBreakBold.svelte"
    // Fill weight
    import IconStarFill from "phosphor-icons-svelte/IconStarFill.svelte"
    // Duotone weight
    import IconBellDuotone from "phosphor-icons-svelte/IconBellDuotone.svelte"
    // Light weight
    import IconArrowRightLight from "phosphor-icons-svelte/IconArrowRightLight.svelte"
    // Thin weight
    import IconCheckThin from "phosphor-icons-svelte/IconCheckThin.svelte"
</script>

<IconHeartRegular />
<IconHeartBreakBold />
<IconStarFill />
<IconBellDuotone />
<IconArrowRightLight />
<IconCheckThin />
```

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

### Basic Icon Usage in Svelte

Source: https://github.com/babakfp/phosphor-icons-svelte/blob/main/README.md

Import and use specific icon components in your Svelte application. Ensure you import each icon individually to optimize build performance.

```svelte
<script>
    import IconHeartRegular from "phosphor-icons-svelte/IconHeartRegular.svelte"
    import IconHeartBreakBold from "phosphor-icons-svelte/IconHeartBreakBold.svelte"
</script>

<IconHeartRegular />
<IconHeartBreakBold />
```

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

### Styling Icons with the Class Prop

Source: https://github.com/babakfp/phosphor-icons-svelte/blob/main/README.md

Apply custom styles to icon components by passing a class name to the `class` prop. This is the only prop available for styling.

```svelte
<IconHeartRegular class="icon-heart-regular" />
```

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

### Usage in an RTL-Aware Svelte Layout

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

Import and use directional icons within an element that has the 'dir="rtl"' attribute. The CSS defined previously will automatically flip the icon.

```svelte
<div dir="rtl">
    <script>
        import IconArrowRightRegular from "phosphor-icons-svelte/IconArrowRightRegular.svelte"
    </script>
    <!-- This icon will be flipped automatically by the CSS above -->
    <IconArrowRightRegular />
</div>
```

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

### Mirror Icons in RTL Layouts with CSS

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

Use CSS attribute selectors to mirror directional icons when the 'dir' attribute is set to 'rtl'. This applies to icons with names implying direction.

```css
[dir="rtl"] [data-phosphor-icon="arrow-right"] {
    transform: scaleX(-1);
}

/* Mirror any icon that implies direction */
[dir="rtl"] [data-phosphor-icon="caret-right"] {
    transform: scaleX(-1);
}

[dir="rtl"] [data-phosphor-icon="heart"] {
    transform: scaleX(-1);
}
```

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

### Style Icons with the `class` Prop

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

Use the `class` prop to apply Tailwind utility classes, CSS Modules, or custom class names for styling. The icon inherits size from surrounding font-size.

```svelte
<script>
    import IconRocketLaunchBold from "phosphor-icons-svelte/IconRocketLaunchBold.svelte"
    import IconWarningFill from "phosphor-icons-svelte/IconWarningFill.svelte"
    import IconCheckCircleRegular from "phosphor-icons-svelte/IconCheckCircleRegular.svelte"
</script>

<!-- Size via font-size: icon inherits 1em = 2rem -->
<span style="font-size: 2rem;">
    <IconRocketLaunchBold />
</span>

<!-- Tailwind: size and color -->
<IconWarningFill class="text-yellow-500 text-3xl" />

<!-- Custom CSS class -->
<IconCheckCircleRegular class="status-icon status-icon--success" />

<style>
    .status-icon {
        width: 1.5rem;
        height: 1.5rem;
        color: green;
        vertical-align: middle;
    }
</style>
```

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

### Default SVG Attributes for Icons

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

Icons automatically include attributes like `width`, `height`, `fill`, `pointer-events`, `display`, `aria-hidden`, and `data-phosphor-icon` for accessibility and styling.

```svelte
<script>
    import IconSunRegular from "phosphor-icons-svelte/IconSunRegular.svelte"
</script>

<!--
  Rendered SVG will have:
    width="1em"            → scales with surrounding font-size
    height="1em"           → scales with surrounding font-size
    fill="currentColor"    → inherits CSS `color` property
    pointer-events="none"  → icon is purely visual, not interactive
    display="inline-block" → safe inline usage in text flows
    aria-hidden="true"     → hidden from screen readers (decorative)
    data-phosphor-icon="sun"  → RTL mirroring hook
-->
<IconSunRegular />

<!-- Controlling color via CSS `color` -->
<p style="color: tomato; font-size: 1.5rem;">
    <IconSunRegular /> Sunny day
</p>
```

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