Phosphor Icons for Vue

You can apply a default style to all icons within a specific part of your component tree by using Vue's provide API. This allows you to set a consistent look (like color or weight) without passing props to every individual icon. Icons will use the nearest provider found above them in the tree.

Available keys for providing: color, size, weight, and mirrored.

<template>
  <PhHorse /> {/* Uses provided styles: lime-green, 32px, bold */}
  <PhHeart /> {/* Same as above */}
  <PhCube /> {/* Same as above */}
</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>

Icon components include a <slot> that accepts valid SVG elements. These slotted children are placed below the normal icon contents in the SVG hierarchy. This is useful for adding background layers, shapes, filters, or animations.

Note: The coordinate space for slotted elements is relative to the icon's viewBox, which is a 256x256 square.

<template>
  <PhCube color="darkorchid" weight="duotone">
    <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"
    />
  </PhCube>
</template>

You can install the Phosphor icons library for Vue using either yarn or npm.

Note: This package (@phosphor-icons/vue) is the modern replacement for the legacy phosphor-vue package. It offers improved performance and smaller bundle sizes while maintaining API compatibility.

```bash
yarn add @phosphor-icons/vue
# or
npm install @phosphor-icons/vue
```埋

While global installation is possible by registering the library with app.use(), it is strongly discouraged. Global registration prevents bundlers (like Vite or Webpack) from performing tree-shaking, meaning your final bundle will include all icons instead of only the ones you actually use.

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')

If you are developing locally, the /src/components directory is not present by default. You must run the assembly script to generate the Vue components from the raw SVG files located in the core submodule.

Run the following command in the root directory:

npm run assemble

You can register all Phosphor Icon components globally in your Vue application by using the default export's install method. This method accepts a Vue App instance and registers every available icon component with a prefixed name (e.g., PhAcorn, PhAirplane).

Once installed, you can use any icon component directly in your templates without manual imports.

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

const app = createApp(App)

// This registers all icons globally
app.use(PhosphorIcons)

app.mount('#app')

You can register all Phosphor icons as global components in your Vue application using Vue.component(). This allows you to use any icon in your templates without importing them individually in every component.

Each icon is registered with a name prefixed by Ph (e.g., PhHandWaving, PhHeart, PhUser).

// Example of how the library registers components internally
Vue.component("PhHandWaving", PhHandWaving)
Vue.component("PhHeart", PhHeart)
Vue.component("PhUser", PhUser)

To use icons, import the specific icon components from @phosphor-icons/vue and use them in your template. Each icon is available as a component named with the Ph prefix followed by the icon name (e.g., PhHeart).

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

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

Icon components accept standard SVG attributes (like height, width, opacity, @click) and several specific props for styling:

• color? (string): Icon stroke/fill color. Supports CSS color strings (hex, rgb, rgba, hsl, hsla, named colors, or currentColor). Defaults to currentColor.
• size? (number | string): Icon height & width. Can be a number or a string with units (e.g., 32, 2rem, 50%). Defaults to 1em.
• weight? ("thin" | "light" | "regular" | "bold" | "fill" | "duotone"): Icon weight/style. Defaults to regular.
• mirrored? (boolean): Flip the icon horizontally. Defaults to false.

The @phosphor-icons/vue package exports each icon as a dedicated Vue component. Icon names are prefixed with Ph followed by PascalCase names (e.g., PhAirplane, PhHeart, PhCheck).

To use an icon, import the specific component from the package and include it in your Vue template. Note that some icons have aliases (e.g., PhAsclepius is also exported as PhCaduceus).

<script setup>
import { PhAirplane, PhHeart } from '@phosphor-icons/vue';
</script>

<template>
  <PhAirplane />
  <PhHeart />
</template>

The following is a partial list of the icon components available in the @phosphor-icons/vue library. Each component is a Vue component representing a specific icon.

// Examples of exported components:
export {
    PhAcorn,
    PhAddressBook,
    PhAirplane,
    PhAirplaneInFlight,
    PhAirplaneLanding,
    PhAirplaneTakeoff,
    PhAirplaneTaxiing,
    PhAirplaneTilt,
    PhAirplay,
    PhAlarm,
    PhAlien,
    PhAlignBottom,
    // ... (hundreds of other icons)
    PhYoutubeLogo
}