> **ATTENTION:** As part of a major update, we will be replacing the existing `phosphor-vue` package with `@phosphor-icons/vue`. We recommend using this new version, as it has improved performance and significantly smaller bundle size. No APIs have been changed, so drop-in replacement should be straightforward. The legacy package will continue to recieve maintenance, but will not be updated with new icons upstream. [Take me to the legacy version ➜](https://github.com/phosphor-icons/vue/tree/vue2)

# Vue Phosphor icons Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at [phosphoricons.com](https://phosphoricons.com). [![NPM](https://img.shields.io/npm/v/phosphor-vue.svg?style=flat-square)](https://www.npmjs.com/package/phosphor-vue) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](https://standardjs.com) [![Travis](https://img.shields.io/travis/com/rektdeckard/phosphor-vue.svg?style=flat-square)](https://travis-ci.com/github/rektdeckard/phosphor-vue) [![GitHub stars](https://img.shields.io/github/stars/phosphor-icons/phosphor-vue?style=flat-square&label=Star)](https://github.com/phosphor-icons/phosphor-vue) [![GitHub forks](https://img.shields.io/github/forks/phosphor-icons/phosphor-vue?style=flat-square&label=Fork)](https://github.com/phosphor-icons/phosphor-vue/fork) [![GitHub watchers](https://img.shields.io/github/watchers/phosphor-icons/phosphor-vue?style=flat-square&label=Watch)](https://github.com/phosphor-icons/phosphor-vue) [![Follow on GitHub](https://img.shields.io/github/followers/rektdeckard?style=flat-square&label=Follow)](https://github.com/rektdeckard) ## Playground Check out our playground in StackBlitz and start experimenting! [![Open in StackBlitz](https://img.shields.io/static/v1?style=for-the-badge&label=Stackblitz&message=open%20playground&color=%231269D3&logo=stackblitz)](https://stackblitz.com/github/phosphor-icons/vue/tree/main?file=src%2FApp.vue) ## Installation ```bash yarn add @phosphor-icons/vue ``` or ```bash npm install @phosphor-icons/vue ``` ## Usage ```html ``` ### Global install Allthough we strongly advise against installing your icons globally, you can do so by registering it in your app as follows: ```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') ``` > Why do we advise against global installs? > > Bundlers such as Vite and Webpack rely on ESM imports to do tree-shaking. When you install entire library globally, you lose the ability to do tree-shaking, since all components are registered within vue, and the bundler cannot know which components are actually used in your app. ### Props Icon components accept all attributes that you can pass to a normal SVG element, including inline `height`/`width`, `x`/`y`, `opacity`, plus `@click` and other `v-on` handlers. The main way of styling them will usually be with the following props: - **color?**: `string` – Icon stroke/fill color. Can be any CSS color string, including `hex`, `rgb`, `rgba`, `hsl`, `hsla`, named colors, or the special `currentColor` variable. - **size?**: `number | string` – Icon height & width. As with standard React elements, this can be a number, or a string with units in `px`, `%`, `em`, `rem`, `pt`, `cm`, `mm`, `in`. - **weight?**: `"thin" | "light" | "regular" | "bold" | "fill" | "duotone"` – Icon weight/style. Can be used, for example, to "toggle" an icon's state: a rating component could use Stars with `weight="regular"` to denote an empty star, and `weight="fill"` to denote a filled star. - **mirrored?**: `boolean` – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate. ### Composition Phosphor takes advantage of Vue's `provide`/`inject` options to make applying a default style to all icons simple. Create a `provide` object or function at the root of the app (or anywhere above the icons in the tree) that returns a configuration object with props to be applied by default to all icons below it in the tree: ```html ``` You may create multiple providers for styling icons differently in separate regions of an application; icons use the nearest provider above them to determine their style. **Note:** The **color**, **size**, **weight**, and **mirrored** properties are all _optional_ props when creating a context, but default to `"currentColor"`, `"1em"`, `"regular"` and `false`. ### Slots

Components have a `` for arbitrary SVG elements, so long as they are valid children of the `

c	File Name	Size	T	Date
zip	dist/	82	---	2026-10-30 19:03:25
-	LICENSE	1071	%	2026-10-30 19:03:23
-	README.md	9215	md	2026-10-30 19:03:23
-	package.json	2029	json	2026-10-30 19:03:23

🌲 / keluargamart apps erp node_modules @phosphor-icons vue

control-panel