### Install Dependencies

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/configuration.md

Install all necessary project dependencies using npm.

```bash
npm install
```

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

### Install with pnpm

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/configuration.md

Install the @phosphor-icons/vue package using pnpm.

```bash
pnpm add @phosphor-icons/vue
```

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

### Install with yarn

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/configuration.md

Install the @phosphor-icons/vue package using yarn.

```bash
yarn add @phosphor-icons/vue
```

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

### Global Plugin Installation

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/quick-reference.md

Alternative method to install Phosphor Icons globally. Not recommended for most use cases.

```typescript
import { createApp } from 'vue'
import PhosphorIcons from "@phosphor-icons/vue"

createApp(App).use(PhosphorIcons).mount('#app')
```

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

### Run Development Server

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/configuration.md

Start the local development server to test changes and preview the library.

```bash
npm run serve
```

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

### Install Phosphor Icons for Vue

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/quick-reference.md

Install the library using npm. Requires Vue 3.2.39 or later.

```bash
npm install @phosphor-icons/vue
```

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

### Index File Plugin Installation

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/icon-generation.md

The `index.ts` file includes a plugin installation method to register all icon components globally with Vue.

```typescript
export default {
    install(Vue: App) {
        Vue.component("PhHeart", PhHeart)
        Vue.component("PhStar", PhStar)
        // ... register all icons
    }
}
```

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

### Wrapper Component Example

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/architecture.md

A Vue component example demonstrating how to dynamically render Phosphor icon components based on a string name and apply common props.

```vue
<template>
  <component :is="icon" :size="size" :color="color" :weight="weight" />
</template>

<script setup>
import * as PhosphorIcons from "@phosphor-icons/vue"

const props = defineProps({
  icon: { type: String, required: true },
  size: { type: [String, Number], default: "1em" },
  color: { type: String, default: "currentColor" },
  weight: { type: String, default: "regular" }
})

const icon = computed(() => PhosphorIcons[`Ph${props.icon}`])
</script>
```

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

### Provider Configuration Example

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/configuration.md

Configure default styling for all icons in your application using Vue's `provide` function. This allows for centralized control over icon appearance.

```typescript
import { provide } from "vue"

// Configure default styling for all icons in your app
provide("color", "#1f2937")      // Dark gray
provide("size", "24px")          // 24px square icons
provide("weight", "regular")     // Standard weight
provide("mirrored", false)       // No mirroring by default
```

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

### Use Globally Registered Icons

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/plugin.md

Demonstrates using an icon component after the plugin has been installed globally. No import statement is needed for the icon itself.

```html
<template>
  <PhHeart size="32" color="red" />
</template>

<!-- No need to import PhHeart -->
```

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

### Comparing Icon Weights in Vue

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/patterns-and-examples.md

Visualize different icon weights side-by-side. This example requires importing the specific icon component.

```vue
<template>
  <div class="weight-comparison">
    <div class="weight-item">
      <PhStar weight="thin" size="32" />
      <p>Thin</p>
    </div>
    <div class="weight-item">
      <PhStar weight="light" size="32" />
      <p>Light</p>
    </div>
    <div class="weight-item">
      <PhStar weight="regular" size="32" />
      <p>Regular</p>
    </div>
    <div class="weight-item">
      <PhStar weight="bold" size="32" />
      <p>Bold</p>
    </div>
    <div class="weight-item">
      <PhStar weight="fill" size="32" />
      <p>Fill</p>
    </div>
    <div class="weight-item">
      <PhStar weight="duotone" size="32" />
      <p>Duotone</p>
    </div>
  </div>
</template>

<script setup>
import { PhStar } from "@phosphor-icons/vue"
</script>

<style scoped>
.weight-comparison {
  display: flex;
  gap: 2rem;
  justify-content: space-around;
  padding: 2rem;
}

.weight-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.weight-item p {
  margin-top: 0.5rem;
  font-size: 12px;
  color: #666;
}
</style>
```

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

### Vue Plugin Installation

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/entry-points.md

Install the Phosphor Icons Vue plugin globally to register all icon components. This makes all icons available for use in your templates without individual imports.

```APIDOC
## Default Export: Vue Plugin

### Description
The default export is a Vue 3 plugin object that registers all icon components globally.

### Usage
```typescript
import PhosphorIcons from "@phosphor-icons/vue"

const app = createApp(App)
app.use(PhosphorIcons)
```

### Type
```typescript
interface PhosphorIconsPlugin {
  install(app: App<Element>): void
}
```

### Behavior
Iterates through all 800+ icon components and registers each with `app.component(name, component)`.
```

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

### Vue TypeScript: Global Installation Type Definitions

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/troubleshooting-faq.md

If icons are installed globally, ensure proper type definitions are included in your TypeScript configuration to avoid errors.

```typescript
// src/types/index.d.ts
import '@phosphor-icons/vue'
declare global {
  namespace JSX {
    interface IntrinsicElements {
      PhHeart: any // Add for each globally installed icon
    }
  }
}
```

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

### Icon Weight Usage Example

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/types.md

Demonstrates how to use the IconWeight type to iterate through and apply different icon weights. This is useful for testing or dynamically setting icon styles.

```typescript
import { PhHeart } from "@phosphor-icons/vue"

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

weights.forEach(weight => {
  // Iterate through available weights
})
```

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

### Global Plugin Installation

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/configuration.md

Register all Phosphor icons globally using the Vue plugin. This is not recommended for production due to larger bundle sizes and lack of tree-shaking optimization.

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import PhosphorIcons from "@phosphor-icons/vue"

const app = createApp(App)

app.use(PhosphorIcons)

app.mount('#app')
```

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

### Importing Common Icons

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/quick-reference.md

Examples of importing various common icons categorized by function (Arrows, Navigation, UI, Media, Social, Interface, Status, Favorites).

```typescript
// Arrows
import { PhArrowUp, PhArrowDown, PhArrowLeft, PhArrowRight } from "@phosphor-icons/vue"

// Navigation
import { PhHome, PhMagnifyingGlass, PhList } from "@phosphor-icons/vue"

// UI
import { PhPlus, PhMinus, PhX, PhCheck } from "@phosphor-icons/vue"

// Media
import { PhPlay, PhPause, PhVolume, PhMusic } from "@phosphor-icons/vue"

// Social
import { PhEnvelope, PhPhone, PhChat, PhUsers } from "@phosphor-icons/vue"

// Interface
import { PhCog, PhBell, PhMenu, PhClose } from "@phosphor-icons/vue"

// Status
import { PhCheckCircle, PhWarningCircle, PhInfoCircle } from "@phosphor-icons/vue"

// Favorites
import { PhHeart, PhStar, PhBookmark } from "@phosphor-icons/vue"
```

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

### Install and Use Vue Plugin Globally

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/plugin.md

Installs the Phosphor Icons Vue plugin globally to register all icon components. This allows using icons without explicit imports in your templates.

```typescript
import { createApp } from "vue"
import App from "./App.vue"
import PhosphorIcons from "@phosphor-icons/vue"

const app = createApp(App)

app.use(PhosphorIcons)

app.mount('#app')
```

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

### Prop Resolution Example

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/architecture.md

Illustrates how component props, injected context, and default values are used to determine the final display value for a prop like 'color'.

```typescript
displayColor = props.color ?? contextColor ?? "currentColor"
```

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

### Auto-generated Index Imports

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/architecture.md

Example of how icon components are imported in the auto-generated src/index.ts file.

```typescript
import PhAcorn from "./icons/PhAcorn.vue"
import PhAddressBook from "./icons/PhAddressBook.vue"
// ... 800+ more
```

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

### Using Aliased Icon Components

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/plugin.md

Demonstrates that some icons have aliases, like `PhTrayArrowDown` and `PhArchiveTray`. Both names can be used interchangeably when importing or when the plugin is installed globally.

```typescript
import { PhTrayArrowDown, PhArchiveTray } from "@phosphor-icons/vue"

// Both refer to the same component
```

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

### Icon Button Example

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/quick-reference.md

Integrate an icon within a button component. The icon can be styled and interact with click events.

```vue
<template>
  <button @click="handleClick">
    <PhDownload size="20" />
    Download
  </button>
</template>

<script setup>
import { PhDownload } from "@phosphor-icons/vue"

function handleClick() {
  // Handle download
}
</script>
```

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

### TypeScript Type Definitions

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/architecture.md

Example of the generated type definitions in dist/index.d.ts, including the plugin interface and individual icon component types.

```typescript
declare module "@phosphor-icons/vue" {
  import type { DefineComponent } from "vue"
  
  // Plugin interface
  interface PhosphorIconsPlugin {
    install(app: App): void
  }
  export const default: PhosphorIconsPlugin
  
  // Icon components
  export const PhAcorn: DefineComponent<...>
  export const PhAddressBook: DefineComponent<...>
  // ... 800+ more
}
```

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

### Composition API Provider for Icon Styling

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/plugin.md

Sets default icon styling properties (color, size, weight, mirrored) using the Composition API's `provide` function. This example sets the color to blue, size to '24px', and weight to 'fill'.

```typescript
import { provide } from "vue"

provide("color", "blue")
provide("size", "24px")
provide("weight", "fill")
provide("mirrored", false)
```

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

### Icon Props Interface Usage Example

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/types.md

Illustrates how to define the props for an icon component in Vue, specifying types for weight, size, color, and mirrored properties.

```typescript
import { PhArrowUp, type PropType } from "@phosphor-icons/vue"

const props = {
  weight: {
    type: String as PropType<IconWeight>
  },
  size: {
    type: [String, Number]
  },
  color: {
    type: String
  },
  mirrored: {
    type: Boolean
  }
}
```

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

### Global Install of Phosphor Icons in Vue

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

Register all Phosphor icon components globally with your Vue application. Note that this is not recommended as it hinders tree-shaking.

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import PhosphorIcons from "@phosphor-icons/vue"

let app = createApp(App)

app.use(PhosphorIcons)

app.mount('#app')
```

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

### Creating a Navigation Menu with Icons in Vue

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/patterns-and-examples.md

Integrate icons into a navigation menu using Vue Router. Ensure the `vue-router` package is installed and configured.

```vue
<template>
  <nav class="menu">
    <router-link
      v-for="item in menuItems"
      :key="item.path"
      :to="item.path"
      class="menu-item"
      :class="{ active: isActive(item.path) }"
    >
      <component :is="item.icon" size="20" />
      <span>{{ item.label }}</span>
    </router-link>
  </nav>
</template>

<script setup>
import { useRoute } from "vue-router"
import { PhHome, PhUser, PhGear, PhSignOut } from "@phosphor-icons/vue"

const route = useRoute()

const menuItems = [
  { path: "/", label: "Home", icon: PhHome },
  { path: "/profile", label: "Profile", icon: PhUser },
  { path: "/settings", label: "Settings", icon: PhGear },
  { path: "/logout", label: "Logout", icon: PhSignOut }
]

function isActive(path) {
  return route.path === path
}
</script>

<style scoped>
.menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 1rem;
  background-color: #f9fafb;
  border-radius: 8px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: #666;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.menu-item:hover {
  background-color: #e5e7eb;
}

.menu-item.active {
  background-color: #3b82f6;
  color: white;
}
</style>
```

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

### Update Vue Phosphor Icons Package

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/troubleshooting-faq.md

Update the library to the latest version using npm to get the newest icons and improvements.

```bash
npm update @phosphor-icons/vue
```

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

### Vue Component Event and Attribute Handling Example

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/types.md

Shows how to use a Phosphor Vue icon component, attaching standard SVG events, custom attributes, and accessibility properties via v-bind.

```typescript
import { PhHeart } from "@phosphor-icons/vue"

// At runtime, all of these work due to v-bind="$attrs" in template
<PhHeart 
  @click="handleClick"           // SVG onclick event
  @mouseenter="handleHover"      // SVG mouseover event
  @keydown="handleKeyPress"      // SVG keyboard event
  data-testid="test-icon"        // Custom attribute
  aria-label="Like button"       // Accessibility attribute
/>
```

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

### Basic Component Usage in Vue

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

Import and use individual Phosphor icon components within your Vue template and script setup. This method allows for optimal tree-shaking.

```html
<template>
  <PhHorse />
  <PhHeart :size="32" color="hotpink" weight="fill" />
  <PhCube />
</template>

<script lang="ts" setup>
  import { PhHorse, PhHeart, PhCube } from "@phosphor-icons/vue";
</script>
```

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

### Vue Nature Icons Usage

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/icon-reference.md

Demonstrates importing and using nature-themed icons like Leaf and Flower in a Vue.js template. The example specifies size and color for the icons.

```vue
<template>
  <PhLeaf size="24" color="green" />
  <PhFlower size="24" color="pink" />
</template>

<script setup>
import { PhLeaf, PhFlower } from "@phosphor-icons/vue"
</script>
```

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

### Animated Icon on Interaction

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/patterns-and-examples.md

Implement an animated icon that reacts to user interaction, such as a click. This example uses a button to trigger a temporary animation with a pulsing notification dot.

```vue
<template>
  <button class="animated-button" @click="triggerAnimation">
    <PhBell size="24" />
    <span v-if="animating" class="notification-dot"></span>
  </button>
</template>

<script setup>
import { ref } from "vue"
import { PhBell } from "@phosphor-icons/vue"

const animating = ref(false)

function triggerAnimation() {
  animating.value = true
  setTimeout(() => {
    animating.value = false
  }, 600)
}
</script>

<style scoped>
.animated-button {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  animation: pulse 0.6s ease-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
</style>
```

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

### Create a Simple Icon Button Component in Vue

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/patterns-and-examples.md

Build a reusable button component that includes a Phosphor icon. This example shows a basic button that emits a click event when pressed.

```vue
<template>
  <button class="icon-button" @click="handleClick">
    <PhHeart size="20" />
  </button>
</template>

<script setup>
import { PhHeart } from "@phosphor-icons/vue"

const emit = defineEmits(["click"])

function handleClick() {
  emit("click")
}
</script>

<style scoped>
.icon-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.icon-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.icon-button:active {
  background-color: rgba(0, 0, 0, 0.2);
}
</style>
```

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

### Vue Interactive Heart Icon

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/icon-reference.md

Illustrates how to use the Heart icon with dynamic 'weight' and 'color' properties in Vue.js. This example shows toggling between 'fill' and 'regular' weights based on a reactive state.

```vue
<template>
  <button @click="toggleFavorite">
    <PhHeart :weight="isFavorited ? 'fill' : 'regular'" color="red" size="24" />
  </button>
</template>

<script setup>
import { ref } from "vue"
import { PhHeart } from "@phosphor-icons/vue"

const isFavorited = ref(false)
</script>
```

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

### Vue Icon Component Structure

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/architecture.md

This Vue SFC demonstrates the structure of a generated icon component, including script blocks for metadata and setup, props, computed properties, and conditional rendering for SVG paths.

```vue
<script lang="ts">
export default {
  name: "PhIconName"
}
</script>

<script lang="ts" setup>
import { computed, inject, PropType } from "vue"

const props = defineProps({
  weight: { type: String as PropType<...> },
  size: { type: [String, Number] },
  color: { type: String },
  mirrored: { type: Boolean }
})

const contextWeight = inject("weight", "regular")
const contextSize = inject("size", "1em")
const contextColor = inject("color", "currentColor")
const contextMirrored = inject("mirrored", false)

const displayWeight = computed(() => props.weight ?? contextWeight)
const displaySize = computed(() => props.size ?? contextSize)
const displayColor = computed(() => props.color ?? contextColor)
const displayMirrored = computed(() => ...)
</script>

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 256 256"
    :width="displaySize"
    :height="displaySize"
    :fill="displayColor"
    :transform="displayMirrored"
    v-bind="$attrs"
  >
    <slot />
    <g v-if="displayWeight === 'bold'"><!-- SVG path --></g>
    <g v-else-if="displayWeight === 'duotone'"><!-- SVG path --></g>
    <!-- ... other weight variants -->
  </svg>
</template>
```

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

### Build Library

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/configuration.md

Compile the library for production using the configured build process.

```bash
npm run build
```

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

### Context Theming with Provide

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/README.md

Demonstrates how to provide default styling for icons using Vue's provide/inject system. This sets the global color, size, weight, and mirrored state for icons within a certain scope.

```typescript
import { provide } from "vue"

provide("color", "blue")
provide("size", "24px")
provide("weight", "bold")
provide("mirrored", false)
```

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

### Importing from Compact Bundle

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/quick-reference.md

Use the `/compact` export for a potentially smaller bundle size if tree-shaking is not effective with your bundler. Generally recommended only if needed.

```typescript
// Same API, different bundle
import { PhHeart } from "@phosphor-icons/vue/compact"
```

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

### Import from Compact Entry Point

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/entry-points.md

Import icons from the compact entry point for use in bundlers that may have issues with tree-shaking or module preservation. This bundles all icons into a single file.

```typescript
import PhosphorIcons from "@phosphor-icons/vue/compact"
import { PhHeart, PhStar } from "@phosphor-icons/vue/compact"
```

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

### Compile with Vite

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/icon-generation.md

Compiles the icon library using Vite, processing the entry point and outputting distribution files in different formats.

```bash
vite build
```

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

### Icon Component Props

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/README.md

Example of using the 'weight' prop on the PhHeart icon component to set its visual style to 'fill'.

```vue
<PhHeart weight="fill" />
```

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

### Analyze Vite Tree-Shaking

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/configuration.md

Run this command to verify that Vite is correctly tree-shaking the library. This helps ensure efficient bundle sizes.

```bash
npm run analyze
```

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

### Compact Export

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/entry-points.md

Utilize the compact export for build systems that may have issues with tree-shaking. It provides the same API as the main entry point but is bundled into a single file.

```APIDOC
## Compact Export

### Description
Exports the same API as the main entry point, but bundled into a single file.

### Usage
```typescript
import PhosphorIcons from "@phosphor-icons/vue/compact"
import { PhHeart, PhStar } from "@phosphor-icons/vue/compact"
```

### Use case
Bundlers that cannot properly tree-shake, or build systems where module preservation would create issues.

### Trade-offs
- Slightly worse tree-shaking (entire bundle may be included)
- Single file, potentially better for some use cases
- Same API and functionality
```

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

### Clone Project with Submodules

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/configuration.md

Clone the Vue Phosphor Icons repository, ensuring that git submodules (containing core icons) are also initialized and updated.

```bash
git clone --recurse-submodules https://github.com/phosphor-icons/vue.git
```

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

### Icon Usage with Multiple Size Units

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/icon-component.md

Demonstrates using the `size` prop with various CSS units and a numeric value.

```html
<template>
  <div>
    <PhHome size="24" />
    <PhHome size="2em" />
    <PhHome size="100%" />
    <PhHome :size="32" />
  </div>
</template>

<script lang="ts" setup>
  import { PhHome } from "@phosphor-icons/vue";
</script>
```

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

### RTL Support with Mirrored Prop

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/quick-reference.md

Use the `mirrored` prop to adjust icon orientation for Right-to-Left (RTL) layouts. The example checks the document's direction.

```vue
<template>
  <PhArrowRight :mirrored="isRTL" />
</template>

<script setup>
import { PhArrowRight } from "@phosphor-icons/vue"

const isRTL = document.documentElement.dir === "rtl"
</script>
```

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

### Vite Build Configuration for Vue Phosphor Icons

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/configuration.md

This configuration sets up Vite for building the library. It specifies the entry point, library name, and Rollup options for externalizing Vue and defining output formats.

```typescript
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: "src/index.ts",
      name: "VuePhosphorIcons"
    },
    rollupOptions: {
      external: ["vue"],
      output: [
        {
          preserveModules: true,
          format: "esm",
          entryFileNames: "[name].mjs"
        },
        {
          preserveModules: false,
          format: "esm",
          entryFileNames: "[name].compact.mjs"
        }
      ]
    }
  }
})
```

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

### Vue Icon Bundle Size: Compact Export vs. Individual Modules

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/troubleshooting-faq.md

Do not use the compact export, as it results in a single bundled file without tree-shaking. Use individual modules for proper tree-shaking.

```typescript
// ❌ Single bundled file, no tree-shaking
import { PhHeart } from "@phosphor-icons/vue/compact"

// ✅ Individual modules for tree-shaking
import { PhHeart } from "@phosphor-icons/vue"

```

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

### Basic Usage with Named Import

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/quick-reference.md

Recommended way to import and use icons. Import specific icons and use them as components in your Vue template.

```vue
<template>
  <PhHeart size="32" color="red" weight="fill" />
</template>

<script setup>
import { PhHeart } from "@phosphor-icons/vue"
</script>
```

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

### Basic Context Provider for Icon Styling

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/plugin.md

Applies default styling (color, size, weight) to all icons within a component subtree using Vue's `provide` function. Icons will render as bold, lime-green, and 32px.

```html
<template>
  <div>
    <PhHorse /> <!-- bold, lime-green, 32px -->
    <PhHeart /> <!-- bold, lime-green, 32px -->
    <PhCube />  <!-- bold, lime-green, 32px -->
  </div>
</template>

<script lang="ts" setup>
  import { PhHorse, PhHeart, PhCube } from "@phosphor-icons/vue";
  import { provide } from "vue"

  provide("color", "limegreen")
  provide("size", 32)
  provide("weight", "bold")
  provide("mirrored", false)
</script>
```

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

### Directory Structure of @phosphor-icons/vue

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/architecture.md

This shows the organization of files within the @phosphor-icons/vue project, including build scripts, core assets, source code, build output, and configuration files.

```bash
ls /workspace/home/vue/
bin/
core/
src/
dist/
playground/
package.json
tsconfig.json
vite.config.ts
env.d.ts
```

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

### Compact Export

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/configuration.md

Import all icons from a single bundled file. Use this only when tree-shaking is not a concern, such as for backwards compatibility.

```typescript
import something from "@phosphor-icons/vue/compact"
```

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

### Vue Icon Usage: Communication

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/icon-reference.md

Provides examples for using communication-related icons like envelopes, chat bubbles, and user profiles in Vue. Icons are imported and can be customized with the 'size' prop.

```vue
<template>
  <PhEnvelope size="24" />
  <PhChat size="24" />
  <PhUsers size="24" />
</template>

<script setup>
import { PhEnvelope, PhChat, PhUsers } from "@phosphor-icons/vue"
</script>
```

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

### Multiple Providers for Scoped Styling

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/plugin.md

Demonstrates creating multiple, independent icon styling contexts. Icons within the 'primary-icons' div will use the 'blue' color, while those in 'secondary-icons' will use 'orange'.

```html
<template>
  <div>
    <div class="primary-icons">
      <PhHome />   <!-- color: blue -->
      <PhStar />   <!-- color: blue -->
    </div>
    <div class="secondary-icons">
      <PhMoon />   <!-- color: orange -->
      <PhSun />    <!-- color: orange -->
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { provide } from "vue"
  import { PhHome, PhStar, PhMoon, PhSun } from "@phosphor-icons/vue"

  // Scoped to parent, applies to primary-icons
  provide("color", "blue")
</script>
```

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

### Import Individual Icon Components

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/entry-points.md

Import specific icon components as named exports from the main entry point. This allows for more granular control and potentially better tree-shaking if only a few icons are used.

```typescript
import { PhHeart, PhStar, PhHome } from "@phosphor-icons/vue"

// Use components in templates
```

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

### Basic Icon Import

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/icon-component.md

Import a single icon component from the library for basic usage.

```typescript
import { PhHeart } from "@phosphor-icons/vue";
```

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

### CSS Variables with Provide

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/configuration.md

Use computed values with CSS variables for responsive icon styling. This example dynamically sets the icon color based on the system's dark mode preference.

```typescript
import { provide, computed } from "vue"

const isDarkMode = computed(() => {
  return window.matchMedia("(prefers-color-scheme: dark)").matches
})

provide("color", computed(() => isDarkMode.value ? "#f0f0f0" : "#1f2937"))
```

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

### Context Providing Data Flow

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/architecture.md

Illustrates how parent components can provide context values (like color or size) that icon components can inject and use as fallbacks.

```plaintext
Parent provides: provide("color", "blue"), provide("size", 24)
    ↓
Icon injects: contextColor = inject("color", "currentColor") → "blue"
    ↓
Icon computes: displayColor = props.color ?? contextColor → props.color ?? "blue"
    ↓
SVG Rendered with context values as fallback
```

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

### Vue Icon Bundle Size: Importing Entire Module

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/troubleshooting-faq.md

Avoid importing the entire module using `import * as`, which bundles all exports. Use named imports to enable tree-shaking.

```typescript
// ❌ Bundles all exports
import * as PhosphorIcons from "@phosphor-icons/vue"
const icon = PhosphorIcons.PhHeart

// ✅ Named import for tree-shaking
import { PhHeart } from "@phosphor-icons/vue"

```

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

### Vue Icon Bundle Size: Global vs. Named Imports

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/troubleshooting-faq.md

Avoid using the global plugin, which bundles all icons and increases bundle size. Prefer named imports for tree-shaking and smaller bundles.

```typescript
// ❌ Bundles ALL icons (~200 KB)
import PhosphorIcons from "@phosphor-icons/vue"
app.use(PhosphorIcons)

// ✅ Tree-shakes unused icons (~2 KB per icon used)
import { PhHeart, PhStar } from "@phosphor-icons/vue"

```

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

### Recommended: Named Imports for Tree-Shaking

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/plugin.md

Imports specific icon components by name, which is recommended for optimal tree-shaking and smaller bundle sizes.

```typescript
import { PhHeart, PhStar, PhHome } from "@phosphor-icons/vue"
```

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

### Displaying Weight Variants

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/quick-reference.md

Demonstrates how to use the `weight` prop to display an icon in its different available styles (thin, light, regular, bold, fill, duotone).

```vue
<template>
  <div>
    <PhStar weight="thin" />
    <PhStar weight="light" />
    <PhStar weight="regular" />
    <PhStar weight="bold" />
    <PhStar weight="fill" />
    <PhStar weight="duotone" />
  </div>
</template>

<script setup>
import { PhStar } from "@phosphor-icons/vue"
</script>
```

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

### Context Theming for Icons

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/quick-reference.md

Provide default theming values (color, size, weight, mirrored) that will be inherited by all icons within the component tree.

```vue
<script setup>
import { provide } from "vue"

provide("color", "blue")
provide("size", "24px")
provide("weight", "bold")
provide("mirrored", false)
</script>
```

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

### Default Export (Preserves Modules)

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/configuration.md

Import individual icon modules for optimal tree-shaking. This is the recommended approach for new projects.

```typescript
import something from "@phosphor-icons/vue"
```

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

### Icon Usage with Props

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/icon-component.md

Customize an icon's appearance by passing props for size, color, and weight.

```html
<template>
  <PhHeart :size="32" color="hotpink" weight="fill" />
</template>

<script lang="ts" setup>
  import { PhHeart } from "@phosphor-icons/vue";
</script>
```

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

### Styling Icons via Context Provider

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/quick-reference.md

Set default styling props (color, size) using Vue's `provide` function. These defaults are inherited by child components.

```vue
<script setup>
import { provide } from "vue"

provide("color", "blue")
provide("size", "24px")
</script>
```

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

### Peer Dependencies

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/configuration.md

The @phosphor-icons/vue package requires Vue version 3.2.39 or higher.

```json
{
  "peerDependencies": {
    "vue": ">=3.2.39"
  }
}
```

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

### Assemble Icon Components

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/configuration.md

Generate Vue component files for each icon from source SVG assets. This script is crucial for updating or adding new icons.

```bash
npm run assemble
```

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

### Generate TypeScript Definitions

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/icon-generation.md

Generates TypeScript declaration files (.d.ts) for the icon components.

```bash
vue-tsc
```

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

### Global Icon Context Provider in Vue

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/patterns-and-examples.md

Set global default properties for all icons within a Vue application using `provide`. This is useful for consistent theming across your app.

```vue
<template>
  <div class="app">
    <!-- All icons below use blue color, 24px size -->
    <PhHome />
    <PhStar />
    <PhUser />
  </div>
</template>

<script setup>
import { provide } from "vue"
import { PhHome, PhStar, PhUser } from "@phosphor-icons/vue"

provide("color", "blue")
provide("size", "24px")
provide("weight", "regular")
</script>
```

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

### Create Icon Button

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/README.md

Combines an icon with text to create a functional button. The PhDownload icon is sized to 20px.

```vue
<button class="icon-button">
  <PhDownload size="20" />
  Download
</button>
```

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

### Styling Icons via Props

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/quick-reference.md

Customize icon appearance directly using props like `size` and `color`.

```vue
<PhHeart size="32" color="hotpink" />
```

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

### Displaying an Icon Grid in Vue

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/patterns-and-examples.md

Use this pattern to display a collection of icons with their names. Ensure all necessary icon components are imported.

```vue
<template>
  <div class="icon-grid">
    <div v-for="icon in icons" :key="icon.name" class="icon-item">
      <component :is="icon.component" size="32" />
      <p>{{ icon.name }}</p>
    </div>
  </div>
</template>

<script setup>
import { PhHome, PhStar, PhHeart, PhUser, PhGear, PhBell } from "@phosphor-icons/vue"

const icons = [
  { name: "Home", component: PhHome },
  { name: "Star", component: PhStar },
  { name: "Heart", component: PhHeart },
  { name: "User", component: PhUser },
  { name: "Settings", component: PhGear },
  { name: "Bell", component: PhBell }
]
</script>

<style scoped>
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-align: center;
}

.icon-item p {
  margin: 0.5rem 0 0 0;
  font-size: 12px;
  color: #666;
}
</style>
```

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

### Reading Icon SVG Files

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/icon-generation.md

The assembly script reads SVG files organized by weight variant (thin, light, regular, bold, fill, duotone) from the core assets directory.

```bash
core/assets/
├── thin/
├── light/
├── regular/
├── bold/
├── fill/
└── duotone/
```

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

### Provide/Inject Keys for Context

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/types.md

Lists the string keys used internally by Phosphor icon components for providing and injecting context values like color, size, weight, and mirroring.

```typescript
import { provide, inject } from "vue"

// Providing values to all descendants
provide("color", "blue")
provide("size", 24)
provide("weight", "bold")
provide("mirrored", false)

// Injecting values in icon components
const contextColor = inject("color", "currentColor")
const contextSize = inject("size", "1em")
const contextWeight = inject("weight", "regular")
const contextMirrored = inject("mirrored", false)
```

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

### Icon Metadata Structure

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/icon-generation.md

Metadata from `icons.js` provides icon names in kebab-case and PascalCase, along with optional aliases for Vue component generation.

```typescript
import { icons } from "../core/src/icons.js"

// icons array contains:
// [
//   { name: "heart", pascal_name: "Heart" },
//   { name: "star", pascal_name: "Star" },
//   { name: "archive-tray", pascal_name: "ArchiveTray", alias: { name: "tray-arrow-down", pascal_name: "TrayArrowDown" } },
//   // ...
// ]
```

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

### Vue Icon Usage: Navigation & Location

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/icon-reference.md

Demonstrates how to implement navigation and location icons within a Vue application. Icons can be configured using props like 'size' and 'weight'.

```vue
<template>
  <PhHome size="24" weight="fill" />
  <PhMapPin size="24" />
</template>

<script setup>
import { PhHome, PhMapPin } from "@phosphor-icons/vue"
</script>
```

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

### SVG Asset Directory Structure

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/architecture.md

Shows the organization of SVG files within the core assets directory, categorized by weight.

```bash
core/assets/
├── bold/
│   ├── acorn.svg
│   ├── address-book.svg
│   └── ...
├── light/
│   └── ...
├── regular/
│   └── ...
├── thin/
│   └── ...
├── fill/
│   └── ...
└── duotone/
    └── ...
```

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

### Format Code Contributions

Source: https://github.com/phosphor-icons/vue/blob/main/CONTRIBUTING.md

Run this script to format your code contributions according to project conventions before submitting a Pull Request. This ensures consistency in code style.

```sh
pnpm format
```

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

### Icon Weight Names

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/icon-reference.md

Lists the string names for the six available weight variants for Phosphor Icons.

```typescript
const weights = ["thin", "light", "regular", "bold", "fill", "duotone"]
```

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

### Individual Icon Component Exports

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/entry-points.md

Import specific icon components by their PascalCase name prefixed with 'Ph' for direct use in your Vue templates.

```APIDOC
## Named Exports: Individual Icon Components

### Description
The module exports every icon component as a named export.

### Usage
```typescript
import { PhHeart, PhStar, PhHome } from "@phosphor-icons/vue"

// Use components in templates
```

### Naming Convention
All icon components follow the naming pattern `Ph<PascalCaseIconName>`.
```

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

### Injection Keys and Default Values

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/plugin.md

Lists the injection keys used by the Phosphor Icons provider and their default values. These keys can be used for manual injection if needed.

```typescript
inject("color", "currentColor")
inject("size", "1em")
inject("weight", "regular")
inject("mirrored", false)
```

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

### Use Named Imported Icons

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/plugin.md

Renders icons that have been imported by name. This approach is preferred for production builds to ensure only used icons are included in the final bundle.

```html
<template>
  <PhHeart />
  <PhStar />
  <PhHome />
</template>
```

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

### Creating a Dynamic Icon Weight Selector in Vue

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/patterns-and-examples.md

Allow users to select an icon's weight dynamically using a dropdown. This requires importing `ref` from Vue and the desired icon component.

```vue
<template>
  <div class="weight-selector">
    <label>Icon Weight:</label>
    <select v-model="selectedWeight">
      <option v-for="weight in weights" :key="weight" :value="weight">
        {{ weight }}
      </option>
    </select>
    <div class="preview">
      <PhStar :weight="selectedWeight" size="48" />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { PhStar } from "@phosphor-icons/vue"

const weights = ["thin", "light", "regular", "bold", "fill", "duotone"]
const selectedWeight = ref("regular")
</script>

<style scoped>
.weight-selector {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}

select {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.preview {
  display: flex;
  justify-content: center;
  padding: 2rem;
  background-color: #f9fafb;
  border-radius: 8px;
}
</style>
```

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

### Provide Default Icon Styles in Vue

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

Use Vue's `provide` function to set default properties like color, size, and weight for all Phosphor icons within a specific part of your application tree. Icons will inherit styles from the nearest provider.

```html
<template>
  <PhHorse /> {/* I'm lime-green, 32px, and bold! */}
  <PhHeart /> {/* Me too! */}
  <PhCube /> {/* Me three :)
</template>

<script lang="ts" setup>
  import { PhHorse, PhHeart, PhCube } from "@phosphor-icons/vue";
  import { provide } from "vue"

  provide("color", "limegreen")
  provide("size", 32)
  provide("weight", "bold")
  provide("mirrored", false)
</script>
```

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

### Importing Icons in Vue

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/troubleshooting-faq.md

Ensure that icon components are properly imported before use. Missing imports will prevent icons from rendering.

```vue
<!-- ❌ Won't work -->
<template>
  <PhHeart />
</template>
<!-- Missing import! -->

<!-- ✅ Works -->
<template>
  <PhHeart />
</template>

<script setup>
import { PhHeart } from "@phosphor-icons/vue"
</script>
```

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

### Vue Global Plugin Usage

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/troubleshooting-faq.md

Registering the PhosphorIcons plugin globally makes all icons available without individual imports. However, this can negatively impact bundle size due to disabled tree-shaking.

```typescript
app.use(PhosphorIcons)
```

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

### Vue Tech Icons Usage

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/icon-reference.md

Demonstrates how to import and use technology-related icons like Code, Terminal, and GithubLogo in a Vue.js template. Ensure the icons are imported from '@phosphor-icons/vue'.

```vue
<template>
  <div class="tech-icons">
    <PhCode size="24" />
    <PhTerminal size="24" />
    <PhGithubLogo size="24" />
  </div>
</template>

<script setup>
import { PhCode, PhTerminal, PhGithubLogo } from "@phosphor-icons/vue"
</script>
```

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

### Package.json Module Resolution Configuration

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/entry-points.md

This JSON configuration in package.json defines how Node.js and bundlers resolve the package's entry points for both CommonJS and ESM environments.

```json
{
  "main": "dist/index.mjs",
  "module": "dist/index.mjs",
  "browser": "dist/index.mjs",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs"
    },
    "./compact": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.compact.mjs"
    }
  },
  "types": "dist/index.d.ts"
}
```

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

### Responsive Icon Sizing

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/README.md

Dynamically adjusts the size of the PhHome icon based on the window width. The icon size is set to 20px for mobile (under 768px) and 32px otherwise.

```vue
<template>
  <PhHome :size="isMobile ? 20 : 32" />
</template>

<script setup>
import { ref, onMounted } from "vue"

const isMobile = ref(false)

onMounted(() => {
  isMobile.value = window.innerWidth < 768
})
</script>
```

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

### Event Handling for Icons

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/quick-reference.md

Attach event listeners like `click` and `mouseover` directly to icon components to handle user interactions.

```vue
<template>
  <PhHeart
    size="24"
    @click="handleClick"
    @mouseover="handleHover"
  />
</template>

<script setup>
import { PhHeart } from "@phosphor-icons/vue"

function handleClick() {
  console.log("Heart clicked")
}

function handleHover() {
  console.log("Heart hovered")
}
</script>
```

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

### Weather & Time Icons in Vue

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/icon-reference.md

Showcase icons for weather conditions and time. Import the necessary icons from '@phosphor-icons/vue' and conditionally render them based on application state.

```vue
<template>
  <div class="weather">
    <PhSun v-if="sunny" size="32" color="gold" />
    <PhCloud v-if="cloudy" size="32" />
    <PhRain v-if="rainy" size="32" color="blue" />
  </div>
</template>

<script setup>
import { PhSun, PhCloud, PhRain } from "@phosphor-icons/vue"
</script>
```

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

### Aliased Components Import

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/api-reference/entry-points.md

Demonstrates importing aliased components in Vue. Both `PhTrayArrowDown` and `PhArchiveTray` refer to the same underlying icon component, simplifying usage.

```typescript
import { PhTrayArrowDown, PhArchiveTray } from "@phosphor-icons/vue"

// Both are the same component, exported under two names
```

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

### Vue Context Provider Placement

Source: https://github.com/phosphor-icons/vue/blob/main/_autodocs/troubleshooting-faq.md

Ensure the context provider is placed above the icons that rely on its context. Incorrect placement can lead to styling issues.

```vue
<!-- ❌ Provider below icons -->
<PhHeart />
<script setup>
import { provide } from "vue"
provide("color", "red")
</script>

<!-- ✅ Provider above icons -->
<script setup>
import { provide } from "vue"
provide("color", "red")
</script>
<PhHeart />
```