### Automatic Import Transformation Example

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

Illustrates how the `sveltePhosphorOptimize` plugin transforms input imports from a Phosphor-Svelte barrel import into individual deep imports. It also shows examples of imports that are intentionally not transformed.

```javascript
// INPUT (your source code — unchanged, easy to read):
import { CubeIcon, HeartIcon, HorseIcon, IconContext } from "phosphor-svelte";
import { CubeIcon as MyCube } from "phosphor-svelte"; // aliased import

// OUTPUT (emitted by the plugin — never written to disk):
import CubeIcon    from "phosphor-svelte/lib/CubeIcon";
import HeartIcon   from "phosphor-svelte/lib/HeartIcon";
import HorseIcon   from "phosphor-svelte/lib/HorseIcon";
import IconContext  from "phosphor-svelte/lib/IconContext";
import MyCube      from "phosphor-svelte/lib/CubeIcon"; // alias preserved

// Files that are NOT transformed (returned as-is):
// - /project/node_modules/some-pkg/index.js
// - /project/.svelte-kit/generated/client.js
// - virtual:__sveltekit/something
// - *.css, *.less, *.sass, *.scss, *.styl, *.pcss, *.sss
// - *.html, *.htm
// - Component.svelte?type=style
```

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

### Install phosphor-svelte with npm

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

Use this command to add phosphor-svelte as a development dependency using npm.

```bash
npm install --save-dev phosphor-svelte
```

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

### Install phosphor-svelte with Yarn

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

Use this command to add phosphor-svelte as a development dependency using Yarn.

```bash
yarn add --dev phosphor-svelte
```

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

### Rendering Icons with Default and Custom Props

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

Demonstrates how to import and render Phosphor icons as Svelte components, showcasing default rendering and the use of custom props for color, weight, and size.

```APIDOC
## Rendering an icon with default props

Every icon is a Svelte 5 component that renders an accessible `<svg role="img">` at `1em` size in `currentColor` with `regular` weight. All standard SVG attributes are forwarded onto the root `<svg>` element in addition to the four icon-specific props.

```svelte
<script>
  import { CubeIcon, HeartIcon, HorseIcon } from "phosphor-svelte";
  // Preferred: direct import for faster compilation
  import CubeIcon from "phosphor-svelte/lib/CubeIcon";
</script>

<!-- Defaults: size="1em", color="currentColor", weight="regular", mirrored={false} -->
<CubeIcon />

<!-- Custom props -->
<HeartIcon color="#AE2983" weight="fill" size={32} />
<HorseIcon color="teal" weight="duotone" />

<!-- Pass arbitrary SVG attributes (e.g., aria-label, class, style) -->
<CubeIcon aria-label="Cube icon" class="my-icon" style="vertical-align: middle;" />
```
```

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

### Using the Mirrored Prop

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

Demonstrates the `mirrored` prop for horizontally flipping an icon, useful for RTL layouts or directional icons.

```APIDOC
### `mirrored` prop — horizontal flip

Flips the icon horizontally using `transform="scale(-1, 1)"`. Useful for RTL language support or directional icons like arrows. Defaults to `false`.

```svelte
<script>
  import { ArrowRightIcon } from "phosphor-svelte";
</script>

<!-- Default: pointing right -->
<ArrowRightIcon />

<!-- Mirrored: pointing left (useful for RTL or back-navigation) -->
<ArrowRightIcon mirrored={true} />

<!-- Dynamic RTL detection -->
<script>
  import { CaretRightIcon } from "phosphor-svelte";
  const isRTL = document.dir === "rtl";
</script>
<CaretRightIcon mirrored={isRTL} />
```
```

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

### Select Icon Weight with `weight` Prop

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

Demonstrates using the `weight` prop to choose between the six available Phosphor icon styles (thin, light, regular, bold, fill, duotone). Defaults to `regular`.

```svelte
<script>
  import { StarIcon } from "phosphor-svelte";

  // Toggling weight based on state (e.g. favorite button)
  let isFavorited = $state(false);
</script>

<button onclick={() => (isFavorited = !isFavorited)}>
  <!-- weight="fill" when active, "regular" when inactive -->
  <StarIcon weight={isFavorited ? "fill" : "regular"} color="gold" size={24} />
</button>

<!-- All six weights -->
<StarIcon weight="thin" />
<StarIcon weight="light" />
<StarIcon weight="regular" />
<StarIcon weight="bold" />
<StarIcon weight="fill" />
<StarIcon weight="duotone" />
```

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

### Render Icon with Default and Custom Props

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

Demonstrates rendering icons with default properties and overriding them with custom values for color, weight, and size. Standard SVG attributes can also be passed.

```svelte
<script>
  import { CubeIcon, HeartIcon, HorseIcon } from "phosphor-svelte";
  // Preferred: direct import for faster compilation
  import CubeIcon from "phosphor-svelte/lib/CubeIcon";
</script>

<!-- Defaults: size="1em", color="currentColor", weight="regular", mirrored={false} -->
<CubeIcon />

<!-- Custom props -->
<HeartIcon color="#AE2983" weight="fill" size={32} />
<HorseIcon color="teal" weight="duotone" />

<!-- Pass arbitrary SVG attributes (e.g., aria-label, class, style) -->
<CubeIcon aria-label="Cube icon" class="my-icon" style="vertical-align: middle;" />
```

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

### Basic Icon Usage in Svelte

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

Import and render icons from the phosphor-svelte library. For faster compilation, import individual icons from 'phosphor-svelte/lib/'.

```html
<script>
  import { HorseIcon, HeartIcon } from "phosphor-svelte";
  // or
  import CubeIcon from "phosphor-svelte/lib/CubeIcon"; // Recommended for faster compiling
</script>

<HorseIcon />
<HeartIcon color="#AE2983" weight="fill" size="{32}" />
<CubeIcon color="teal" weight="duotone" />
```

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

### Set Icon Size with `size` Prop

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

Shows how to control the width and height of an icon using the `size` prop. It accepts pixel values, CSS units, or percentages, defaulting to `1em`.

```svelte
<script>
  import { ArrowRightIcon } from "phosphor-svelte";
</script>

<ArrowRightIcon size={16} />       <!-- 16px (number) -->
<ArrowRightIcon size={32} />       <!-- 32px -->
<ArrowRightIcon size="2rem" />     <!-- 2rem -->
<ArrowRightIcon size="48px" />     <!-- explicit px string -->
<ArrowRightIcon size="5%" />       <!-- percentage -->
<ArrowRightIcon size="1em" />      <!-- relative to font size (default) -->
```

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

### Configure Vite with sveltePhosphorOptimize Plugin

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

Integrate the `sveltePhosphorOptimize` plugin into your Vite configuration to automatically optimize Phosphor icon imports. This plugin rewrites barrel imports into deep imports during the build process, improving performance without manual code changes.

```javascript
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
import { sveltePhosphorOptimize } from "phosphor-svelte/vite";

export default defineConfig({
  plugins: [sveltekit(), sveltePhosphorOptimize()],
});
```

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

### Customizing Icon Color

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

Explains how to use the `color` prop to set the stroke and fill color of an icon, accepting any valid CSS color string.

```APIDOC
### `color` prop — stroke and fill color

Accepts any CSS color string. Defaults to `"currentColor"`, which inherits the surrounding text color automatically. Can be overridden per-icon or set globally via `IconContext`.

```svelte
<script>
  import { CircleIcon, StarIcon } from "phosphor-svelte";
</script>

<CircleIcon color="currentColor" />        <!-- inherits text color (default) -->
<CircleIcon color="#3b82f6" />             <!-- hex -->
<CircleIcon color="rgb(59, 130, 246)" />   <!-- rgb -->
<CircleIcon color="hsl(217, 91%, 60%)" />  <!-- hsl -->
<CircleIcon color="tomato" />              <!-- named color -->
<StarIcon   color="rgba(0,0,0,0.5)" />     <!-- semi-transparent -->
```
```

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

### Generate Index Files with definitionsTemplate and moduleTemplate

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

Use definitionsTemplate and moduleTemplate to generate the lib/index.d.ts and lib/index.js barrel exports respectively. These functions export all icons with preferred and deprecated identifiers, along with IconContext and shared types.

```javascript
import { definitionsTemplate, moduleTemplate } from "./scripts/template.js";

const components = [
  { name: "Minus", nameWithIcon: "MinusIcon" },
  { name: "Plus",  nameWithIcon: "PlusIcon"  },
];

console.log(definitionsTemplate(components));
// export { default as IconContext } from "./IconContext.svelte";
// export { default as MinusIcon }  from "./MinusIcon.svelte";
// export { default as Minus }      from "./Minus.svelte";
// export { default as PlusIcon }   from "./PlusIcon.svelte";
// export { default as Plus }       from "./Plus.svelte";
// export type * from "./shared.d.ts";

console.log(moduleTemplate(components));
// export { default as IconContext } from './IconContext.svelte';
// export { default as MinusIcon }  from './MinusIcon.svelte';
// export { default as Minus }      from './Minus.svelte';
// export { default as PlusIcon }   from './PlusIcon.svelte';
// export { default as Plus }       from './Plus.svelte';
```

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

### Customizing Icon Size

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

Details the `size` prop for controlling the width and height of an icon, accepting numbers (pixels) or CSS unit strings.

```APIDOC
### `size` prop — width and height

Sets both the `width` and `height` attributes of the SVG. Accepts a number (treated as pixels) or any CSS unit string. Defaults to `"1em"`.

```svelte
<script>
  import { ArrowRightIcon } from "phosphor-svelte";
</script>

<ArrowRightIcon size={16} />       <!-- 16px (number) -->
<ArrowRightIcon size={32} />       <!-- 32px -->
<ArrowRightIcon size="2rem" />     <!-- 2rem -->
<ArrowRightIcon size="48px" />     <!-- explicit px string -->
<ArrowRightIcon size="5%" />       <!-- percentage -->
<ArrowRightIcon size="1em" />      <!-- relative to font size (default) -->
```
```

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

### Configure Vite for Phosphor Svelte Optimization

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

Add the sveltePhosphorOptimize plugin to your vite.config.ts file to enable import optimization for phosphor-svelte.

```javascript
// vite.config.ts

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
import { sveltePhosphorOptimize } from "phosphor-svelte/vite";

export default defineConfig({
  plugins: [sveltekit(), sveltePhosphorOptimize()],
});
```

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

### Internal setIconContext and getIconContext Utilities

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

These low-level utilities manage the Svelte context for icon defaults. `setIconContext` writes defaults, and `getIconContext` safely reads them, providing a fallback empty object if no context is present. This ensures icons always have a safe default.

```javascript
// src/lib/context.js — usage inside a custom wrapper component
import { setIconContext, getIconContext } from "phosphor-svelte/lib/context";

// In a custom provider component:
// setIconContext({ color: "blue", size: 20, weight: "light" });

// In a custom consumer (e.g., a custom icon wrapper):
const ctx = getIconContext();
// ctx => { color: "blue", size: 20, weight: "light" }
// If no IconContext ancestor exists:
// ctx => {}

// Precedence chain inside every generated icon component:
// let weight = $derived(props.weight ?? ctx.weight ?? "regular");
// let color  = $derived(props.color  ?? ctx.color  ?? "currentColor");
// let size   = $derived(props.size   ?? ctx.size   ?? "1em");
```

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

### Set Icon Color with `color` Prop

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

Illustrates how to set the stroke and fill color of an icon using the `color` prop. It accepts various CSS color formats and defaults to `currentColor`.

```svelte
<script>
  import { CircleIcon, StarIcon } from "phosphor-svelte";
</script>

<CircleIcon color="currentColor" />        <!-- inherits text color (default) -->
<CircleIcon color="#3b82f6" />             <!-- hex -->
<CircleIcon color="rgb(59, 130, 246)" />   <!-- rgb -->
<CircleIcon color="hsl(217, 91%, 60%)" />  <!-- hsl -->
<CircleIcon color="tomato" />              <!-- named color -->
<StarIcon   color="rgba(0,0,0,0.5)" />     <!-- semi-transparent -->
```

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

### Customizing Icon Weight

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

Explains the `weight` prop for selecting one of the six Phosphor icon style variants (thin, light, regular, bold, fill, duotone).

```APIDOC
### `weight` prop — icon style variant

Selects which of the six Phosphor weight variants to render. Defaults to `"regular"`. Passing an unsupported value logs a console error and renders nothing inside the SVG.

```svelte
<script>
  import { StarIcon } from "phosphor-svelte";

  // Toggling weight based on state (e.g. favorite button)
  let isFavorited = $state(false);
</script>

<button onclick={() => (isFavorited = !isFavorited)}>
  <!-- weight="fill" when active, "regular" when inactive -->
  <StarIcon weight={isFavorited ? "fill" : "regular"} color="gold" size={24} />
</button>

<!-- All six weights -->
<StarIcon weight="thin" />
<StarIcon weight="light" />
<StarIcon weight="regular" />
<StarIcon weight="bold" />
<StarIcon weight="fill" />
<StarIcon weight="duotone" />
```
```

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

### Optimize Imports with Vite Plugin

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

This diff shows how to change named imports to default imports using the svelte-phosphor-optimize Vite plugin, which can improve compile times.

```diff
<script>
-  import { CubeIcon, HeartIcon, HorseIcon } from "phosphor-svelte";
+  import CubeIcon from "phosphor-svelte/lib/CubeIcon";
+  import HeartIcon from "phosphor-svelte/lib/HeartIcon";
+  import HorseIcon from "phosphor-svelte/lib/HorseIcon";
</script>
```

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

### Applying Default Styles with IconContext

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

Use IconContext to apply default props like color, size, and weight to all icons within its scope. Individual icon props will override context values.

```html
<script>
  import IconContext from "phosphor-svelte/lib/IconContext";
  // or
  // import { IconContext } from "phosphor-svelte";

  import CubeIcon from "phosphor-svelte/lib/CubeIcon";
  import HorseIcon from "phosphor-svelte/lib/HorseIcon";
  import HeartIcon from "phosphor-svelte/lib/HeartIcon";
</script>

<IconContext
  values={{ color: 'limegreen', size: 32, mirrored: false, weight: 'bold' }}>
  <HorseIcon /> <!-- I'm lime-green, 32px, and bold! -->
  <HeartIcon /> <!-- Me too! -->
  <CubeIcon color="red" /> <!-- red -->
</IconContext>
```

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

### Flip Icon Horizontally with `mirrored` Prop

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

Explains the use of the `mirrored` prop to horizontally flip an icon, which is useful for Right-to-Left (RTL) language support or directional indicators. Defaults to `false`.

```svelte
<script>
  import { ArrowRightIcon } from "phosphor-svelte";
</script>

<!-- Default: pointing right -->
<ArrowRightIcon />

<!-- Mirrored: pointing left (useful for RTL or back-navigation) -->
<ArrowRightIcon mirrored={true} />

<!-- Dynamic RTL detection -->
<script>
  import { CaretRightIcon } from "phosphor-svelte";
  const isRTL = document.dir === "rtl";
</script>
<CaretRightIcon mirrored={isRTL} />
```

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

### Generate Svelte Icon Components

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

Use the `generateComponents` function to create Svelte component files (`.svelte`) and their type definitions (`.d.ts`) for each weight variant of a Phosphor icon. This function reads raw SVG path data and generates both preferred and deprecated component formats.

```javascript
// scripts/build.js
import { generateComponents } from "./scripts/build.js";

// Generates: lib/CircleIcon.svelte, lib/CircleIcon.svelte.d.ts
//            lib/Circle.svelte (deprecated), lib/Circle.svelte.d.ts
const result = await generateComponents("circle.svg", [
  "regular", "thin", "light", "bold", "fill", "duotone"
]);

// result =>
// {
//   iconName: "circle.svg",
//   name: "Circle",
//   nameWithIcon: "CircleIcon",
//   weights: [
//     { weight: "regular", svgPath: '<path d="M128,232A104,..."' },
//     { weight: "thin",    svgPath: '<path d="M128,230A102,..."' },
//     // ...
//   ]
// }

// Run the full build (reads all icons from core/assets/regular/):
// npm run build
// => ✔ 1248 components generated
```

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

### Generate Svelte Component Source Code

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

The `componentTemplate` function generates the complete source code for a Svelte icon component. It uses Svelte 5 runes and conditional rendering (`{#if}` blocks) for different icon weights, integrating `getIconContext` for context-based defaults.

```javascript
import { componentTemplate } from "./scripts/template.js";

const iconWeights = [
  { weight: "regular", svgPath: `<path d=\"M216,136H40a8,8,0,0,1,0-16H216a8,8,0,0,1,0,16Z\"` },
  { weight: "bold",    svgPath: `<path d=\"M216,140H40a12,12,0,0,1,0-24H216a12,12,0,0,1,0,24Z\"` },
];

const source = componentTemplate(iconWeights);
// Produces:
// <!-- GENERATED FILE -->
// <script lang="ts">
//   import type { IconComponentProps } from "./shared.d.ts";
//   import { getIconContext } from "./context";
//   const ctx = getIconContext();
//   let { children, ...props }: IconComponentProps = $props();
//   let weight  = $derived(props.weight  ?? ctx.weight  ?? "regular");
//   let color   = $derived(props.color   ?? ctx.color   ?? "currentColor");
//   let size    = $derived(props.size    ?? ctx.size    ?? "1em");
//   let mirrored = $derived(props.mirrored ?? ctx.mirrored ?? false);
//   ... 
// </script>
// <svg ...>
//   {#if weight === "regular"} <path d="M216,136..."/> {:else if weight === "bold"} ... {/if}
// </svg>
```

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

### IconContext Component for Default Props

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

Apply default props to all descendant icons using the IconContext component. Per-icon props override context values, which in turn override built-in defaults. Nest multiple IconContext providers for scoped overrides.

```svelte
<script>
  import IconContext from "phosphor-svelte/lib/IconContext";
  // or: import { IconContext } from "phosphor-svelte";
  import { CubeIcon, HorseIcon, HeartIcon, StarIcon } from "phosphor-svelte";
</script>

<!-- All icons inside inherit color, size, weight, mirrored -->
<IconContext values={{ color: "limegreen", size: 32, weight: "bold", mirrored: false }}>
  <HorseIcon />               <!-- lime-green, 32px, bold -->
  <HeartIcon />               <!-- lime-green, 32px, bold -->
  <CubeIcon color="red" />    <!-- red (prop overrides context), 32px, bold -->
</IconContext>

<!-- Nested contexts: override only what you need -->
<IconContext values={{ size: 24, color: "slategray" }}>
  <StarIcon />                <!-- slategray, 24px, regular -->

  <IconContext values={{ color: "gold", weight: "fill" }}>
    <StarIcon />              <!-- gold, 24px (inherited), fill -->
  </IconContext>
</IconContext>

<!-- Spread any SVG attribute as a context default -->
<IconContext values={{ color: "currentColor", class: "icon", focusable: "false" }}>
  <CubeIcon />
  <HeartIcon />
</IconContext>
```

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

### Compositing Icons with SVG Elements

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

Enhance icons by adding arbitrary SVG elements as children. These children are rendered below the icon's main content and can be used for animations or effects.

```html
<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>
```

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

### Composable SVG Content with Children Slot

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

Use the children slot to render arbitrary SVG elements inside an icon. This enables animations, filters, masks, and custom overlays within the icon's coordinate space. Ensure child SVG elements are compatible with the icon's viewBox.

```svelte
<script>
  import { CubeIcon } from "phosphor-svelte";
</script>

<!-- Animated: rotating and pulsing cube -->
<CubeIcon color="darkorchid" weight="duotone" size={64}>
  <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>

<!-- Custom background shape behind the icon -->
<CubeIcon color="white" size={48}>
  <circle cx="128" cy="128" r="120" fill="#6366f1" />
</CubeIcon>
```

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

### Phosphor-Svelte TypeScript Types

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

Import and utilize various icon-related TypeScript types from 'phosphor-svelte'. IconComponentProps extends Svelte's SVGAttributes, allowing standard SVG attributes in addition to icon-specific props.

```typescript
import type {
  IconWeight,
  IconBaseProps,
  IconComponentProps,
  IconContextProps,
} from "phosphor-svelte";

// IconWeight — the six valid weight strings
const w: IconWeight = "duotone"; // "thin"|"light"|"regular"|"bold"|"fill"|"duotone"

// IconBaseProps — only the four icon-specific props
const base: IconBaseProps = {
  color: "#ff0000",       // string, default "currentColor"
  size: "1.5rem",         // number | string, default "1em"
  weight: "fill",         // IconWeight, default "regular"
  mirrored: false,        // boolean, default false
};

// IconComponentProps — icon props + all SVG element attributes
const full: IconComponentProps = {
  ...base,
  "aria-label": "Heart icon",
  role: "img",
  class: "icon icon--heart",
  tabindex: 0,
};

// IconContextProps — props accepted by <IconContext>
const ctx: IconContextProps = {
  values: { color: "steelblue", size: 20, weight: "bold" },
  // children is a Svelte Snippet
};
```

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