{"library":"phosphor-vue","title":"Phosphor Icons for Vue","description":"Phosphor-vue provides a comprehensive set of highly customizable SVG icons specifically tailored for Vue.js applications. The library is currently stable at version `2.2.0` for Vue 3 projects, offering a wide range of icons with multiple display weights (thin, light, regular, bold, fill, duotone). For Vue 2 users, version `1.x` branches are maintained separately. Releases typically align with updates to the core Phosphor Icons library, introducing new icons and bug fixes. Key differentiators include robust TypeScript support, a focus on flexibility through various icon weights for dynamic styling and state representation, and support for both global and individual component registration to balance convenience with bundle size optimization. It integrates seamlessly into Vue's component system, accepting standard SVG attributes and custom props for styling.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install phosphor-vue"],"cli":null},"imports":["import PhosphorVue from 'phosphor-vue'","import { PhHorse, PhHeart } from 'phosphor-vue'","import type { IconProps, IconWeight } from 'phosphor-vue'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createApp } from 'vue';\nimport PhosphorVue from 'phosphor-vue';\nimport App from './App.vue';\n\nconst app = createApp(App);\n\n// Register PhosphorVue as a global plugin\napp.use(PhosphorVue);\n\napp.mount('#app');\n\n// App.vue example\n/*\n<template>\n  <div>\n    <h1>My App</h1>\n    <ph-heart :size=\"32\" color=\"red\" weight=\"fill\" />\n    <ph-cube :size=\"24\" color=\"blue\" />\n    <ph-star :weight=\"isStarred ? 'fill' : 'regular'\" @click=\"toggleStar\" />\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nconst isStarred = ref(false);\nconst toggleStar = () => { isStarred.value = !isStarred.value; };\n</script>\n*/","lang":"typescript","description":"Demonstrates global installation of PhosphorVue as a plugin for a Vue 3 application, allowing any icon to be used directly in templates without individual imports.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}