{"_id":"@dnlsndr/phosphor-vue","_rev":"9-5bc6ce4b8870260fa161493566dea8bb","name":"@dnlsndr/phosphor-vue","dist-tags":{"vite":"1.4.6","latest":"1.4.0","next":"1.7.0"},"versions":{"1.4.0":{"name":"@dnlsndr/phosphor-vue","version":"1.4.0","description":"A clean and friendly icon family for Vue, too!","author":{"name":"rektdeckard"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/phosphor-icons/phosphor-vue.git"},"homepage":"https://phosphoricons.com","sideEffects":false,"types":"dist/phosphor-vue.es.d.ts","main":"dist/phosphor-vue.es.js","browser":"dist/phosphor-vue.es.js","module":"dist/phosphor-vue.es.js","unpkg":"dist/phosphor-vue.iife.js","keywords":["vue","icons","svg","phosphor","design","interface","UI","UX"],"scripts":{"serve":"vite","build":"vite build && vue-tsc --emitDeclarationOnly","compile":"vue-tsc --emitDeclarationOnly","analyze":"cross-env ANALYZE=true vite build","assemble":"node bin/assemble.js","format":"prettier --write ."},"dependencies":{},"devDependencies":{"@babel/core":"^7.16.12","@types/node":"^17.0.13","@vue/compiler-sfc":"^3.2.29","cross-env":"^7.0.3","rollup-plugin-visualizer":"^5.5.4","typescript":"^4.5.5","vite":"^2.7.13","vite-plugin-vue2":"^1.9.3","vue":"^2.6.14","vue-template-compiler":"^2.6.14","vue-tsc":"^0.31.1"},"peerDependencies":{"vue":"^2.6.14"},"engines":{"node":">=12"},"gitHead":"f819f2ed67e5d902f02c80bee3708133b1c53718","bugs":{"url":"https://github.com/phosphor-icons/phosphor-vue/issues"},"_id":"@dnlsndr/phosphor-vue@1.4.0","_nodeVersion":"16.13.1","_npmVersion":"8.3.2","dist":{"integrity":"sha512-Yb667zxwzzOL/qILbU/dYBNStkLpBdGs+k0Fbkq7Wv2zxN3BZJIryVy9wbYxcrjQusDypouUOG+cw/PeUHsmPg==","shasum":"9caadba3966b16fb1cf9c468a82c0de6f3ad5df3","tarball":"https://registry.npmjs.org/@dnlsndr/phosphor-vue/-/phosphor-vue-1.4.0.tgz","fileCount":1057,"unpackedSize":16044393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9ntxCRA9TVsSAnZWagAAy/oQAJpEiQYEgYZYAafciQ74\nzpOYwx2Z6xh2QTaIDcJX/7PBGT5Sn8KobgY2L1eROI9T1NrGR2J/oX1OGLBw\nWQl/3Ic9L4Ohr/n8VixphlUpQM+QQcmVn1gGuNvBPSyLWG3nsK5t0+BkamQu\ng9sExoEHCfKCHgumtxNLSU1+gdgiX1paBRJ6GmkNYswPbsgplimp6Lom/u5w\nHJSX1Wrgq0Se+G84n50x/CaKFNDMxJN5J3u4cx9CAwxl4/0JMIc7/rNmPiUX\n+dKzFTIcmllfEmFCss67YcIXZBkwW6JA8JtnxDlkFxyvC3H7b9B9jLRkU5KK\nANKbksP0gHl1tgZ/jHk2xzFZFVunTNMu3TJNmjZrA5+PltllE5qmSMHC4jrg\netzGt656NQfmaydIToBn8gsG7N712djuQ0oBLBOlX3S8BBTH2EBOwGA00xPr\np9SI2hgWmPbjQx8lQMQL1U+gAgZC3WY/q2H8sOERU8MiOwaPoPWVrHcfiVns\nqEDKV33qJXRfiUfSwYiQ6/ByXu9ED9y9KnNCmiQl3Ppc5dcAcK14oyXwNJ4h\nzl6lnLttPe4LrT2mQwe/y1H+TWo1RcXc2qIodItLPRK/ltnye9i1MqmRTeQo\nMAbQ1fe89t9QBpeDvM8FQb4ar3SDpui1/5d48Fv7Obm8SMbQzabQ7kRBX9WF\nlONV\r\n=cHuu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK7gTYVMJ9a2uRn8spM/kZfyBit6M5FNfKuB3YwZ6svwIhAPKeWJLLMRW3sSn/C5Dyh1CpK/rV3iYtUvdpNkE3WyLX"}]},"_npmUser":{"name":"dnlsndr","email":"daniel.schneider@eramux.com"},"directories":{},"maintainers":[{"name":"dnlsndr","email":"daniel.schneider@eramux.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/phosphor-vue_1.4.0_1643543409791_0.9073948584445537"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.1":{"name":"@dnlsndr/phosphor-vue","version":"1.4.1","description":"A clean and friendly icon family for Vue, too!","author":{"name":"rektdeckard"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/phosphor-icons/phosphor-vue.git"},"homepage":"https://phosphoricons.com","sideEffects":false,"types":"dist/phosphor-vue.es.d.ts","main":"dist/phosphor-vue.umd.js","browser":"dist/phosphor-vue.es.js","module":"dist/phosphor-vue.es.js","unpkg":"dist/phosphor-vue.iife.js","keywords":["vue","icons","svg","phosphor","design","interface","UI","UX"],"scripts":{"serve":"vite","build":"vite build && vue-tsc --emitDeclarationOnly","compile":"vue-tsc --emitDeclarationOnly","analyze":"cross-env ANALYZE=true vite build","assemble":"node bin/assemble.js","format":"prettier --write ."},"dependencies":{},"devDependencies":{"@babel/core":"^7.16.12","@types/node":"^17.0.13","@vue/compiler-sfc":"^3.2.29","cross-env":"^7.0.3","rollup-plugin-visualizer":"^5.5.4","typescript":"^4.5.5","vite":"^2.7.13","vite-plugin-vue2":"^1.9.3","vue":"^2.6.14","vue-template-compiler":"^2.6.14","vue-tsc":"^0.31.1"},"peerDependencies":{"vue":"^2.6.14"},"engines":{"node":">=12"},"readme":"<img src=\"/meta/phosphor-mark-tight-yellow.png\" width=\"128\" align=\"right\" />\n\n# phosphor-vue\n\nPhosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at [phosphoricons.com](https://phosphoricons.com).\n\nFor Vue 3 support, check out the [vue3](https://github.com/phosphor-icons/phosphor-vue/tree/vue3) branch.\n\n[![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)\n\n[![GitHub stars](https://img.shields.io/github/stars/phosphor-icons/phosphor-vue?style=flat-square&label=Star)](https://github.com/phosphor-icons/phosphor-vue)\n[![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)\n[![GitHub watchers](https://img.shields.io/github/watchers/phosphor-icons/phosphor-vue?style=flat-square&label=Watch)](https://github.com/phosphor-icons/phosphor-vue)\n[![Follow on GitHub](https://img.shields.io/github/followers/rektdeckard?style=flat-square&label=Follow)](https://github.com/rektdeckard)\n\n## Installation\n\n```bash\nyarn add phosphor-vue\n```\n\nor\n\n```bash\nnpm install --save phosphor-vue\n```\n\n## Usage\n\n```html\n<template>\n  <div>\n    <ph-horse />\n    <ph-heart :size=\"32\" color=\"hotpink\" weight=\"fill\" />\n    <ph-cube />\n  </div>\n</template>\n\n<script>\n  import { PhHorse, PhHeart, PhCube } from \"phosphor-vue\";\n  export default {\n    name: \"App\",\n    components: {\n      PhHorse,\n      PhHeart,\n      PhCube,\n    },\n  };\n</script>\n```\n\n### Props\n\nIcon 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:\n\n- **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.\n- **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`.\n- **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.\n- **mirrored?**: `boolean` – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.\n\n### Composition\n\nPhosphor 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:\n\n```html\n<template>\n  <div>\n    <ph-horse /> {/* I'm lime-green, 32px, and bold! */} <ph-heart /> {/* Me\n    too! */} <ph-cube /> {/* Me three :) */}\n  </div>\n</template>\n\n<script>\n  import { PhHorse, PhHeart, PhCube } from \"phosphor-vue\";\n  export default {\n    name: \"App\",\n    components: {\n      PhHorse,\n      PhHeart,\n      PhCube,\n    },\n    provide: {\n      color: \"limegreen\",\n      size: 32,\n      weight: \"bold\",\n      mirrored: false,\n    },\n  };\n</script>\n```\n\nYou 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.\n\n**Note:** The **color**, **size**, **weight**, and **mirrored** properties are all _optional_ props when creating a context, but default to `\"currentColor\"`, `\"1em\"`, `\"regular\"` and `false`. Also be aware that when using this API, per Vue:\n\n> The `provide` and `inject` bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive.\n\n### Slots\n\n<img src=\"/meta/cube-rotate.svg\" width=\"128\" align=\"right\" />\n\nComponents have a `<slot>` for arbitrary SVG elements, so long as they are valid children of the `<svg>` element. This can be used to modify an icon with background layers or shapes, filters, animations and more. The slotted children will be placed _below_ the normal icon contents.\n\nThe following will cause the Cube icon to rotate and pulse:\n\n```html\n<template>\n  <ph-cube color=\"darkorchid\" weight=\"duotone\">\n    <animate\n      attributeName=\"opacity\"\n      values=\"0;1;0\"\n      dur=\"4s\"\n      repeatCount=\"indefinite\"\n    />\n    <animateTransform\n      attributeName=\"transform\"\n      attributeType=\"XML\"\n      type=\"rotate\"\n      dur=\"5s\"\n      from=\"0 0 0\"\n      to=\"360 0 0\"\n      repeatCount=\"indefinite\"\n    />\n  </ph-cube>\n</template>\n```\n\n**Note:** The coordinate space of slotted elements is relative to the contents of the icon `viewBox`, which is a 256x256 square. Only [valid SVG elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element#SVG_elements_by_category) will be rendered.\n\n## Our Related Projects\n\n- [phosphor-home](https://github.com/phosphor-icons/phosphor-home) ▲ Phosphor homepage and general info\n- [phosphor-react](https://github.com/phosphor-icons/phosphor-react) ▲ Phosphor icon component library for React\n- [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) ▲ Phosphor icons for Vanilla JS\n- [phosphor-flutter](https://github.com/phosphor-icons/phosphor-flutter) ▲ Phosphor IconData library for Flutter\n- [phosphor-webcomponents](https://github.com/phosphor-icons/phosphor-webcomponents) ▲ Phosphor icons as Web Components\n- [phosphor-figma](https://github.com/phosphor-icons/phosphor-figma) ▲ Phosphor icons Figma plugin\n- [phosphor-sketch](https://github.com/phosphor-icons/phosphor-sketch) ▲ Phosphor icons Sketch plugin\n\n## Community Projects\n\n- [phosphor-react-native](https://github.com/duongdev/phosphor-react-native) ▲ Phosphor icon component library for React Native\n- [phosphor-svelte](https://github.com/haruaki07/phosphor-svelte) ▲ Phosphor icons for Svelte apps\n- [phosphor-r](https://github.com/dreamRs/phosphoricons) ▲ Phosphor icon wrapper for R documents and applications\n- [blade-phosphor-icons](https://github.com/codeat3/blade-phosphor-icons) ▲ Phosphor icons in your Laravel Blade views\n\nIf you've made a port of Phosphor and you want to see it here, just open a PR [here](https://github.com/phosphor-icons/phosphor-home)!\n\n## License\n\nMIT © [phosphor-icons](https://github.com/phosphor-icons)\n","readmeFilename":"README.md","gitHead":"f819f2ed67e5d902f02c80bee3708133b1c53718","bugs":{"url":"https://github.com/phosphor-icons/phosphor-vue/issues"},"_id":"@dnlsndr/phosphor-vue@1.4.1","_nodeVersion":"16.13.1","_npmVersion":"8.3.2","dist":{"integrity":"sha512-4Zb0AbOH7wFEGhKsuqtX1+8NGPKMXmcEHyTzNZQP2V2m84L9V1S2dMAQyElzp3S7hfRjmLlE55Nkmz5hSAdaDQ==","shasum":"e7f59e22a2fc95b6edeaf04818c04cc4a0ad274b","tarball":"https://registry.npmjs.org/@dnlsndr/phosphor-vue/-/phosphor-vue-1.4.1.tgz","fileCount":1057,"unpackedSize":16044394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9n0tCRA9TVsSAnZWagAA1s8P/1bdJarg8eq7J4fQ7F7Y\n6enUV90xyWuIxRek5f5HhKLibDGiGb31SfgaFj4iDb1RF3+3Wk9Osn3VRUNs\nAqacWxLzo9ZRa9m0AFbQ+nJPzDvpNTqlU3BRCQGdaoaxhcNdg5ZsoW6VyXwa\nK+SycLfLYT0GfzPGEGo3wJOXVAGMxtnntiPDK30uNxD5KV+Qu07/aYH1H+bB\nYFvlgqbBTseKjlJXwIttBnEckY2QbcHpPc/y1QC65WSsA1+ma84qRlJWKdsw\nJ+9v5LMqQQ5B9PT+1vhORgAdeaUEcIzztip/zgvqzEbIbFrXXMhU+4fIu+mf\nIFDY39sLfmxjLY+dLvgMyB/c1XJXdfOaYY4BrwKoJUjXEUDBQvjp9R/CJO3J\nHNH7+A24JXex2Ra3V6YGNoZ3pz3NzqrXp6vZ+8a76FoaBueMEzqFQmItYQEL\njBUnCDzrm+UXX66VYJ/BTGLcEXLx17bWCCpa2TT/BNxhpeOwG8XYPvVWECn2\nqDC7DreZdPgbuuE8lRFxmv1NjpJuVSZ0abTLi/w8RbvtPXZtt/Jo/lWb6Ulp\nKsnmv1JIpiWO9bJjCXWvjnUyO9JEYhZcX6BzFrJCDKhh3KE9DUwCEEODid+s\nrSSTq0Ok+52gfdJ/tMqvfTMFXuruSevHiAxXlMERxBpmlbBQ+Zb0vNtT8aEM\n7LGy\r\n=dPt1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfT6tHuMWDTO97O+vGP5ev0Dg8Lw98wYrfvYkY4oZgRQIhAL2vsdHzBHqOkKt0LYlASMu3EuJi+h0mLeZ6r/RoO8Gl"}]},"_npmUser":{"name":"dnlsndr","email":"daniel.schneider@eramux.com"},"directories":{},"maintainers":[{"name":"dnlsndr","email":"daniel.schneider@eramux.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/phosphor-vue_1.4.1_1643543853078_0.9738090948604674"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.2":{"name":"@dnlsndr/phosphor-vue","version":"1.4.2","description":"A clean and friendly icon family for Vue, too!","author":{"name":"rektdeckard"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/phosphor-icons/phosphor-vue.git"},"homepage":"https://phosphoricons.com","sideEffects":false,"types":"dist/phosphor-vue.es.d.ts","main":"dist/phosphor-vue.es.js","browser":"dist/phosphor-vue.es.js","module":"dist/phosphor-vue.es.js","unpkg":"dist/phosphor-vue.iife.js","keywords":["vue","icons","svg","phosphor","design","interface","UI","UX"],"scripts":{"serve":"vite","build":"vite build && vue-tsc --emitDeclarationOnly","compile":"vue-tsc --emitDeclarationOnly","analyze":"cross-env ANALYZE=true vite build","assemble":"node bin/assemble.js","format":"prettier --write ."},"dependencies":{},"devDependencies":{"@babel/core":"^7.16.12","@types/node":"^17.0.13","@vue/compiler-sfc":"^3.2.29","cross-env":"^7.0.3","rollup-plugin-visualizer":"^5.5.4","typescript":"^4.5.5","vite":"^2.7.13","vite-plugin-vue2":"^1.9.3","vue":"^2.6.14","vue-template-compiler":"^2.6.14","vue-tsc":"^0.31.1"},"peerDependencies":{"vue":"^2.6.14"},"engines":{"node":">=12"},"readme":"<img src=\"/meta/phosphor-mark-tight-yellow.png\" width=\"128\" align=\"right\" />\n\n# phosphor-vue\n\nPhosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at [phosphoricons.com](https://phosphoricons.com).\n\nFor Vue 3 support, check out the [vue3](https://github.com/phosphor-icons/phosphor-vue/tree/vue3) branch.\n\n[![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)\n\n[![GitHub stars](https://img.shields.io/github/stars/phosphor-icons/phosphor-vue?style=flat-square&label=Star)](https://github.com/phosphor-icons/phosphor-vue)\n[![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)\n[![GitHub watchers](https://img.shields.io/github/watchers/phosphor-icons/phosphor-vue?style=flat-square&label=Watch)](https://github.com/phosphor-icons/phosphor-vue)\n[![Follow on GitHub](https://img.shields.io/github/followers/rektdeckard?style=flat-square&label=Follow)](https://github.com/rektdeckard)\n\n## Installation\n\n```bash\nyarn add phosphor-vue\n```\n\nor\n\n```bash\nnpm install --save phosphor-vue\n```\n\n## Usage\n\n```html\n<template>\n  <div>\n    <ph-horse />\n    <ph-heart :size=\"32\" color=\"hotpink\" weight=\"fill\" />\n    <ph-cube />\n  </div>\n</template>\n\n<script>\n  import { PhHorse, PhHeart, PhCube } from \"phosphor-vue\";\n  export default {\n    name: \"App\",\n    components: {\n      PhHorse,\n      PhHeart,\n      PhCube,\n    },\n  };\n</script>\n```\n\n### Props\n\nIcon 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:\n\n- **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.\n- **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`.\n- **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.\n- **mirrored?**: `boolean` – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.\n\n### Composition\n\nPhosphor 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:\n\n```html\n<template>\n  <div>\n    <ph-horse /> {/* I'm lime-green, 32px, and bold! */} <ph-heart /> {/* Me\n    too! */} <ph-cube /> {/* Me three :) */}\n  </div>\n</template>\n\n<script>\n  import { PhHorse, PhHeart, PhCube } from \"phosphor-vue\";\n  export default {\n    name: \"App\",\n    components: {\n      PhHorse,\n      PhHeart,\n      PhCube,\n    },\n    provide: {\n      color: \"limegreen\",\n      size: 32,\n      weight: \"bold\",\n      mirrored: false,\n    },\n  };\n</script>\n```\n\nYou 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.\n\n**Note:** The **color**, **size**, **weight**, and **mirrored** properties are all _optional_ props when creating a context, but default to `\"currentColor\"`, `\"1em\"`, `\"regular\"` and `false`. Also be aware that when using this API, per Vue:\n\n> The `provide` and `inject` bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive.\n\n### Slots\n\n<img src=\"/meta/cube-rotate.svg\" width=\"128\" align=\"right\" />\n\nComponents have a `<slot>` for arbitrary SVG elements, so long as they are valid children of the `<svg>` element. This can be used to modify an icon with background layers or shapes, filters, animations and more. The slotted children will be placed _below_ the normal icon contents.\n\nThe following will cause the Cube icon to rotate and pulse:\n\n```html\n<template>\n  <ph-cube color=\"darkorchid\" weight=\"duotone\">\n    <animate\n      attributeName=\"opacity\"\n      values=\"0;1;0\"\n      dur=\"4s\"\n      repeatCount=\"indefinite\"\n    />\n    <animateTransform\n      attributeName=\"transform\"\n      attributeType=\"XML\"\n      type=\"rotate\"\n      dur=\"5s\"\n      from=\"0 0 0\"\n      to=\"360 0 0\"\n      repeatCount=\"indefinite\"\n    />\n  </ph-cube>\n</template>\n```\n\n**Note:** The coordinate space of slotted elements is relative to the contents of the icon `viewBox`, which is a 256x256 square. Only [valid SVG elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element#SVG_elements_by_category) will be rendered.\n\n## Our Related Projects\n\n- [phosphor-home](https://github.com/phosphor-icons/phosphor-home) ▲ Phosphor homepage and general info\n- [phosphor-react](https://github.com/phosphor-icons/phosphor-react) ▲ Phosphor icon component library for React\n- [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) ▲ Phosphor icons for Vanilla JS\n- [phosphor-flutter](https://github.com/phosphor-icons/phosphor-flutter) ▲ Phosphor IconData library for Flutter\n- [phosphor-webcomponents](https://github.com/phosphor-icons/phosphor-webcomponents) ▲ Phosphor icons as Web Components\n- [phosphor-figma](https://github.com/phosphor-icons/phosphor-figma) ▲ Phosphor icons Figma plugin\n- [phosphor-sketch](https://github.com/phosphor-icons/phosphor-sketch) ▲ Phosphor icons Sketch plugin\n\n## Community Projects\n\n- [phosphor-react-native](https://github.com/duongdev/phosphor-react-native) ▲ Phosphor icon component library for React Native\n- [phosphor-svelte](https://github.com/haruaki07/phosphor-svelte) ▲ Phosphor icons for Svelte apps\n- [phosphor-r](https://github.com/dreamRs/phosphoricons) ▲ Phosphor icon wrapper for R documents and applications\n- [blade-phosphor-icons](https://github.com/codeat3/blade-phosphor-icons) ▲ Phosphor icons in your Laravel Blade views\n\nIf you've made a port of Phosphor and you want to see it here, just open a PR [here](https://github.com/phosphor-icons/phosphor-home)!\n\n## License\n\nMIT © [phosphor-icons](https://github.com/phosphor-icons)\n","readmeFilename":"README.md","gitHead":"f819f2ed67e5d902f02c80bee3708133b1c53718","bugs":{"url":"https://github.com/phosphor-icons/phosphor-vue/issues"},"_id":"@dnlsndr/phosphor-vue@1.4.2","_nodeVersion":"16.13.1","_npmVersion":"8.3.2","dist":{"integrity":"sha512-0crIOTfrkFwxe736S09T78QZVR5VeGeq4wgUudRvpvJc2zjWuYNgQs5WvdODGcUVvY1M7Fv1FGvKSOL9yNp7qA==","shasum":"28a717ddfc9d5a1105ea9c3894476474a65f4e5a","tarball":"https://registry.npmjs.org/@dnlsndr/phosphor-vue/-/phosphor-vue-1.4.2.tgz","fileCount":1056,"unpackedSize":16136166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9n/7CRA9TVsSAnZWagAAieYP/ifXMFAHTLeOPDgYMNhD\nGMW4uWBUuZSq0CAUgjjB4tRYgVJGbbVnhxGTnzkIDblieTu75nPtGw6U05lm\nj9rJGvVE+tJNJeQzr0cUZjpBY2yBZ1yTEQ7N1ty1vsCb+DZAueykxFIei91E\nLjcZXfSnAkSabeKKLsSfmdDeb/6dykzwF5fVERJrEJ4nakfXUvkvHvlQyFEr\npe/AvMzlX84ulgg9buXmz61eJhzxO39I+qYHiX7HtKCuVud70mE1rtQu1jAb\nFqHYTRXDTl6DYltCEKGVrYLbcA1KNQEMLYKHCJB2C/VeeKD56xYNts0ph/hj\nOHEicS2dHQV1/hP/ePjm5hGncAhiEy5q6/Rvv8dyEWchrPPAlCsxuiqL9ECX\n/EHdPuOw9NBOZtXujgNj+Rm9N9znNwfdshjKBTUWsnBvNegAikkC1wdSjWQm\nOgivoXrxMFHFSEoASkIYo5Dp+VUMVqGsUI5QZ7fd9yJ8eTl96Uc6HkKPC24d\n9etMjgJITma8G258RY+Eh5vjYvecFEvhHOnzznnLX1F+JTvkQC03Rm2kM7jL\n1J0PbRDArJb8DC1bFJPMFy2baEeUc0Q3yJvH4AzlgD7GEP6XpyiQNO9K66/r\nZKwgR0NnmFHOy4SytMaZZQCYnE4TDMWFOygU56858ar2CXvcPvLukQynVSfu\nVzAF\r\n=woMW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHM5hD3Z4v6LC+ve60D0CjyA6qY/kNLCVNvdmPYDgVOgAiAU9kR+SMtySxN2UALwavTVoEd7xOFOuX+pJW7CBV9/6A=="}]},"_npmUser":{"name":"dnlsndr","email":"daniel.schneider@eramux.com"},"directories":{},"maintainers":[{"name":"dnlsndr","email":"daniel.schneider@eramux.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/phosphor-vue_1.4.2_1643544571163_0.008138103164907928"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.3":{"name":"@dnlsndr/phosphor-vue","version":"1.4.3","description":"A clean and friendly icon family for Vue, too!","author":{"name":"rektdeckard"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/phosphor-icons/phosphor-vue.git"},"homepage":"https://phosphoricons.com","sideEffects":false,"types":"dist/phosphor-vue.es.d.ts","main":"dist/phosphor-vue.es.js","browser":"dist/phosphor-vue.es.js","module":"dist/phosphor-vue.es.js","unpkg":"dist/phosphor-vue.iife.js","keywords":["vue","icons","svg","phosphor","design","interface","UI","UX"],"scripts":{"serve":"vite","build":"vite build && vue-tsc --emitDeclarationOnly","compile":"vue-tsc --emitDeclarationOnly","analyze":"cross-env ANALYZE=true vite build","assemble":"node bin/assemble.js","format":"prettier --write ."},"dependencies":{},"devDependencies":{"@babel/core":"^7.16.12","@types/node":"^17.0.13","@vue/compiler-sfc":"^3.2.29","cross-env":"^7.0.3","rollup-plugin-visualizer":"^5.5.4","typescript":"^4.5.5","vite":"^2.7.13","vite-plugin-vue2":"^1.9.3","vue":"^2.6.14","vue-template-compiler":"^2.6.14","vue-tsc":"^0.31.1"},"peerDependencies":{"vue":"^2.6.14"},"engines":{"node":">=12"},"readme":"<img src=\"/meta/phosphor-mark-tight-yellow.png\" width=\"128\" align=\"right\" />\n\n# phosphor-vue\n\nPhosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at [phosphoricons.com](https://phosphoricons.com).\n\nFor Vue 3 support, check out the [vue3](https://github.com/phosphor-icons/phosphor-vue/tree/vue3) branch.\n\n[![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)\n\n[![GitHub stars](https://img.shields.io/github/stars/phosphor-icons/phosphor-vue?style=flat-square&label=Star)](https://github.com/phosphor-icons/phosphor-vue)\n[![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)\n[![GitHub watchers](https://img.shields.io/github/watchers/phosphor-icons/phosphor-vue?style=flat-square&label=Watch)](https://github.com/phosphor-icons/phosphor-vue)\n[![Follow on GitHub](https://img.shields.io/github/followers/rektdeckard?style=flat-square&label=Follow)](https://github.com/rektdeckard)\n\n## Installation\n\n```bash\nyarn add phosphor-vue\n```\n\nor\n\n```bash\nnpm install --save phosphor-vue\n```\n\n## Usage\n\n```html\n<template>\n  <div>\n    <ph-horse />\n    <ph-heart :size=\"32\" color=\"hotpink\" weight=\"fill\" />\n    <ph-cube />\n  </div>\n</template>\n\n<script>\n  import { PhHorse, PhHeart, PhCube } from \"phosphor-vue\";\n  export default {\n    name: \"App\",\n    components: {\n      PhHorse,\n      PhHeart,\n      PhCube,\n    },\n  };\n</script>\n```\n\n### Props\n\nIcon 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:\n\n- **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.\n- **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`.\n- **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.\n- **mirrored?**: `boolean` – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.\n\n### Composition\n\nPhosphor 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:\n\n```html\n<template>\n  <div>\n    <ph-horse /> {/* I'm lime-green, 32px, and bold! */} <ph-heart /> {/* Me\n    too! */} <ph-cube /> {/* Me three :) */}\n  </div>\n</template>\n\n<script>\n  import { PhHorse, PhHeart, PhCube } from \"phosphor-vue\";\n  export default {\n    name: \"App\",\n    components: {\n      PhHorse,\n      PhHeart,\n      PhCube,\n    },\n    provide: {\n      color: \"limegreen\",\n      size: 32,\n      weight: \"bold\",\n      mirrored: false,\n    },\n  };\n</script>\n```\n\nYou 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.\n\n**Note:** The **color**, **size**, **weight**, and **mirrored** properties are all _optional_ props when creating a context, but default to `\"currentColor\"`, `\"1em\"`, `\"regular\"` and `false`. Also be aware that when using this API, per Vue:\n\n> The `provide` and `inject` bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive.\n\n### Slots\n\n<img src=\"/meta/cube-rotate.svg\" width=\"128\" align=\"right\" />\n\nComponents have a `<slot>` for arbitrary SVG elements, so long as they are valid children of the `<svg>` element. This can be used to modify an icon with background layers or shapes, filters, animations and more. The slotted children will be placed _below_ the normal icon contents.\n\nThe following will cause the Cube icon to rotate and pulse:\n\n```html\n<template>\n  <ph-cube color=\"darkorchid\" weight=\"duotone\">\n    <animate\n      attributeName=\"opacity\"\n      values=\"0;1;0\"\n      dur=\"4s\"\n      repeatCount=\"indefinite\"\n    />\n    <animateTransform\n      attributeName=\"transform\"\n      attributeType=\"XML\"\n      type=\"rotate\"\n      dur=\"5s\"\n      from=\"0 0 0\"\n      to=\"360 0 0\"\n      repeatCount=\"indefinite\"\n    />\n  </ph-cube>\n</template>\n```\n\n**Note:** The coordinate space of slotted elements is relative to the contents of the icon `viewBox`, which is a 256x256 square. Only [valid SVG elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element#SVG_elements_by_category) will be rendered.\n\n## Our Related Projects\n\n- [phosphor-home](https://github.com/phosphor-icons/phosphor-home) ▲ Phosphor homepage and general info\n- [phosphor-react](https://github.com/phosphor-icons/phosphor-react) ▲ Phosphor icon component library for React\n- [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) ▲ Phosphor icons for Vanilla JS\n- [phosphor-flutter](https://github.com/phosphor-icons/phosphor-flutter) ▲ Phosphor IconData library for Flutter\n- [phosphor-webcomponents](https://github.com/phosphor-icons/phosphor-webcomponents) ▲ Phosphor icons as Web Components\n- [phosphor-figma](https://github.com/phosphor-icons/phosphor-figma) ▲ Phosphor icons Figma plugin\n- [phosphor-sketch](https://github.com/phosphor-icons/phosphor-sketch) ▲ Phosphor icons Sketch plugin\n\n## Community Projects\n\n- [phosphor-react-native](https://github.com/duongdev/phosphor-react-native) ▲ Phosphor icon component library for React Native\n- [phosphor-svelte](https://github.com/haruaki07/phosphor-svelte) ▲ Phosphor icons for Svelte apps\n- [phosphor-r](https://github.com/dreamRs/phosphoricons) ▲ Phosphor icon wrapper for R documents and applications\n- [blade-phosphor-icons](https://github.com/codeat3/blade-phosphor-icons) ▲ Phosphor icons in your Laravel Blade views\n\nIf you've made a port of Phosphor and you want to see it here, just open a PR [here](https://github.com/phosphor-icons/phosphor-home)!\n\n## License\n\nMIT © [phosphor-icons](https://github.com/phosphor-icons)\n","readmeFilename":"README.md","gitHead":"f819f2ed67e5d902f02c80bee3708133b1c53718","bugs":{"url":"https://github.com/phosphor-icons/phosphor-vue/issues"},"_id":"@dnlsndr/phosphor-vue@1.4.3","_nodeVersion":"16.13.1","_npmVersion":"8.3.2","dist":{"integrity":"sha512-6wB7nvhlGmtnZzQZiEEO4AFWIodLuOCAgqWGGp5QwaZeyzZIY9wniqTGMQdCh9EnAe4hhx3zNgWrGyMxHHqLPQ==","shasum":"90a43c2c5aad83f61eed1deabbd1c33f3f974ea8","tarball":"https://registry.npmjs.org/@dnlsndr/phosphor-vue/-/phosphor-vue-1.4.3.tgz","fileCount":1056,"unpackedSize":16136172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9oD5CRA9TVsSAnZWagAAq4YP/iWndmbwMIWgvbP5c1c+\naBbwysGgs8HJuX/FQ/m9WULjXLTibML6LWZucFF7nl2n7trEklo210dHOYI2\nEJr67ETBJxSfa/iUShh1jLViWA0sMQA0kNutTG7dOa+8zQlT+2r/ukubXtFH\nHu1xx4d+BWbvuUJctBofXXS8nz1I03uuUThnh77j3KI/6rlXz1rjvDOpYGPs\nxDUNgYlkQ3s4tesdbcCXE4GdKkhCcT8l3451hWYGW8zSzgUjwVLYWwwvYJG5\ndZ+ldfbs+dRtT8OqVl69eHxb0FlbTC86Su27oZBTCe9JzSB/JPfUET4KqlM0\n3DLGQWL7LsSZCbyTzOG505+n/TRmKrcjuqxviEhbUlsmQcMcUAy/vynWz3w0\n8XF38EAmdsBun1x2xtAux5+lkemwL0vHbJxq4VtI5IkgS0VzVuDzN+UVCLyd\nMmFbsdmrygbHhLkNOF2XRdcN/QAKoagDJejYY+569FZiZ3BTZy8FGE/Uu2VF\nYETJrCJckJP+EAqs4EOdvv58+RrkoGxnK8QaOAgJ49kOmAE6V4eYEWSvislt\nPZmBDX30dMRz3LDf++neW+LQCjwWc0VeliKXeJ2mJ6f9fr4Mhb3gTfcvOXY0\nRh4WzAryL1sAdp59DCwlOUwH7lElQ7q6Rk/3Ml4zAEmASzlSHMphYvfYFfJv\nnPBK\r\n=RnCh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPFz25iO1+U/TyeBHvwZx1+tAgce5X0rYvLc9DRLPLTAIhAOH9NiMrb+JTn/BAeVfSgPNamN4JS9rlIt/ar2J9jEzH"}]},"_npmUser":{"name":"dnlsndr","email":"daniel.schneider@eramux.com"},"directories":{},"maintainers":[{"name":"dnlsndr","email":"daniel.schneider@eramux.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/phosphor-vue_1.4.3_1643544825175_0.5538532816293913"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.4":{"name":"@dnlsndr/phosphor-vue","version":"1.4.4","description":"A clean and friendly icon family for Vue, too!","author":{"name":"rektdeckard"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/phosphor-icons/phosphor-vue.git"},"homepage":"https://phosphoricons.com","sideEffects":false,"types":"dist/phosphor-vue.es.d.ts","main":"dist/phosphor-vue.es.js","browser":"dist/phosphor-vue.es.js","module":"dist/phosphor-vue.es.js","unpkg":"dist/phosphor-vue.iife.js","keywords":["vue","icons","svg","phosphor","design","interface","UI","UX"],"scripts":{"serve":"vite","build":"vite build && vue-tsc --emitDeclarationOnly","compile":"vue-tsc --emitDeclarationOnly","analyze":"cross-env ANALYZE=true vite build","assemble":"node bin/assemble.js","format":"prettier --write ."},"dependencies":{},"devDependencies":{"@babel/core":"^7.16.12","@types/node":"^17.0.13","@vue/compiler-sfc":"^3.2.29","cross-env":"^7.0.3","rollup-plugin-visualizer":"^5.5.4","typescript":"^4.5.5","vite":"^2.7.13","vite-plugin-vue2":"^1.9.3","vue":"^2.6.14","vue-template-compiler":"^2.6.14","vue-tsc":"^0.31.1"},"peerDependencies":{"vue":"^2.6.14"},"engines":{"node":">=12"},"readme":"<img src=\"/meta/phosphor-mark-tight-yellow.png\" width=\"128\" align=\"right\" />\n\n# phosphor-vue\n\nPhosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at [phosphoricons.com](https://phosphoricons.com).\n\nFor Vue 3 support, check out the [vue3](https://github.com/phosphor-icons/phosphor-vue/tree/vue3) branch.\n\n[![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)\n\n[![GitHub stars](https://img.shields.io/github/stars/phosphor-icons/phosphor-vue?style=flat-square&label=Star)](https://github.com/phosphor-icons/phosphor-vue)\n[![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)\n[![GitHub watchers](https://img.shields.io/github/watchers/phosphor-icons/phosphor-vue?style=flat-square&label=Watch)](https://github.com/phosphor-icons/phosphor-vue)\n[![Follow on GitHub](https://img.shields.io/github/followers/rektdeckard?style=flat-square&label=Follow)](https://github.com/rektdeckard)\n\n## Installation\n\n```bash\nyarn add phosphor-vue\n```\n\nor\n\n```bash\nnpm install --save phosphor-vue\n```\n\n## Usage\n\n```html\n<template>\n  <div>\n    <ph-horse />\n    <ph-heart :size=\"32\" color=\"hotpink\" weight=\"fill\" />\n    <ph-cube />\n  </div>\n</template>\n\n<script>\n  import { PhHorse, PhHeart, PhCube } from \"phosphor-vue\";\n  export default {\n    name: \"App\",\n    components: {\n      PhHorse,\n      PhHeart,\n      PhCube,\n    },\n  };\n</script>\n```\n\n### Props\n\nIcon 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:\n\n- **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.\n- **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`.\n- **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.\n- **mirrored?**: `boolean` – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.\n\n### Composition\n\nPhosphor 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:\n\n```html\n<template>\n  <div>\n    <ph-horse /> {/* I'm lime-green, 32px, and bold! */} <ph-heart /> {/* Me\n    too! */} <ph-cube /> {/* Me three :) */}\n  </div>\n</template>\n\n<script>\n  import { PhHorse, PhHeart, PhCube } from \"phosphor-vue\";\n  export default {\n    name: \"App\",\n    components: {\n      PhHorse,\n      PhHeart,\n      PhCube,\n    },\n    provide: {\n      color: \"limegreen\",\n      size: 32,\n      weight: \"bold\",\n      mirrored: false,\n    },\n  };\n</script>\n```\n\nYou 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.\n\n**Note:** The **color**, **size**, **weight**, and **mirrored** properties are all _optional_ props when creating a context, but default to `\"currentColor\"`, `\"1em\"`, `\"regular\"` and `false`. Also be aware that when using this API, per Vue:\n\n> The `provide` and `inject` bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive.\n\n### Slots\n\n<img src=\"/meta/cube-rotate.svg\" width=\"128\" align=\"right\" />\n\nComponents have a `<slot>` for arbitrary SVG elements, so long as they are valid children of the `<svg>` element. This can be used to modify an icon with background layers or shapes, filters, animations and more. The slotted children will be placed _below_ the normal icon contents.\n\nThe following will cause the Cube icon to rotate and pulse:\n\n```html\n<template>\n  <ph-cube color=\"darkorchid\" weight=\"duotone\">\n    <animate\n      attributeName=\"opacity\"\n      values=\"0;1;0\"\n      dur=\"4s\"\n      repeatCount=\"indefinite\"\n    />\n    <animateTransform\n      attributeName=\"transform\"\n      attributeType=\"XML\"\n      type=\"rotate\"\n      dur=\"5s\"\n      from=\"0 0 0\"\n      to=\"360 0 0\"\n      repeatCount=\"indefinite\"\n    />\n  </ph-cube>\n</template>\n```\n\n**Note:** The coordinate space of slotted elements is relative to the contents of the icon `viewBox`, which is a 256x256 square. Only [valid SVG elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element#SVG_elements_by_category) will be rendered.\n\n## Our Related Projects\n\n- [phosphor-home](https://github.com/phosphor-icons/phosphor-home) ▲ Phosphor homepage and general info\n- [phosphor-react](https://github.com/phosphor-icons/phosphor-react) ▲ Phosphor icon component library for React\n- [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) ▲ Phosphor icons for Vanilla JS\n- [phosphor-flutter](https://github.com/phosphor-icons/phosphor-flutter) ▲ Phosphor IconData library for Flutter\n- [phosphor-webcomponents](https://github.com/phosphor-icons/phosphor-webcomponents) ▲ Phosphor icons as Web Components\n- [phosphor-figma](https://github.com/phosphor-icons/phosphor-figma) ▲ Phosphor icons Figma plugin\n- [phosphor-sketch](https://github.com/phosphor-icons/phosphor-sketch) ▲ Phosphor icons Sketch plugin\n\n## Community Projects\n\n- [phosphor-react-native](https://github.com/duongdev/phosphor-react-native) ▲ Phosphor icon component library for React Native\n- [phosphor-svelte](https://github.com/haruaki07/phosphor-svelte) ▲ Phosphor icons for Svelte apps\n- [phosphor-r](https://github.com/dreamRs/phosphoricons) ▲ Phosphor icon wrapper for R documents and applications\n- [blade-phosphor-icons](https://github.com/codeat3/blade-phosphor-icons) ▲ Phosphor icons in your Laravel Blade views\n\nIf you've made a port of Phosphor and you want to see it here, just open a PR [here](https://github.com/phosphor-icons/phosphor-home)!\n\n## License\n\nMIT © [phosphor-icons](https://github.com/phosphor-icons)\n","readmeFilename":"README.md","gitHead":"f819f2ed67e5d902f02c80bee3708133b1c53718","bugs":{"url":"https://github.com/phosphor-icons/phosphor-vue/issues"},"_id":"@dnlsndr/phosphor-vue@1.4.4","_nodeVersion":"16.13.1","_npmVersion":"8.3.2","dist":{"integrity":"sha512-aEmzs7IYuICP55X0l0vHFhBCdVqEnG3vXoH96xVluK2LtKv2TpbwfK7dATm2zQTGxI99O99k9FK0YTCxujx5MA==","shasum":"9da77b38da1435475cb3d5ac5896cfa45f36fd06","tarball":"https://registry.npmjs.org/@dnlsndr/phosphor-vue/-/phosphor-vue-1.4.4.tgz","fileCount":1056,"unpackedSize":16046150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9oPQCRA9TVsSAnZWagAAIqkQAKBxd+w13PH3zwXRIGtN\nOx4NpJ4GGu1D83+4iomlfIMhSo+x0SGlckbbm1jjnUG3nGXJwxLc5u8mN+Z2\nPLdxepmsa+XlGhkIdwyfp3fBGtPVi2AZeFxAdbpacI//ekO4kHSe0hIz8+SC\n8E8LH6mnfroHwA21bWm1FbfwKDDAiVrKWkkzuaJW/Ge5EpjMeVcbOPd8pguw\nkzz/i8aFyddrGhHO2bM//kSApP6H55zdDsUN7gK+ux8g5OeDRGmgAztvXkTX\nMhdxGguQhg9VgL6lUAiHsB9tCwMWZsp1QiiWZ7ldXPjIBUVkIQH1Hq/9RgyY\n1D2Zfa+KiMuaGm6N4Is2n2NAQfpaRiGYSNySBGKp5bwhXr/2vhVo0ifDsgpY\nrfKvp24tTUmbo1nbvR/+ncIltZCulBX8Q4shhNTIvwOTHjqY8KiqYEtvwMp0\nKAq7GNZifRFXQ8KhJ3kKosSZtaEdpjYRG4+Z8obAT43z+Vzqv/aSbFfNBAUb\niyXiGAIwVKjwpiTVO2UZYlyMTX3hOR+iExxh7bH//dNEfbCQq8+z59HiwKSh\noPzAKJQA6l52xVsN7/pmyKh7FHXqlyC4xap3vKV4wHEi4QoteOx7EHql0kon\njD4yfsL4wnl18nriRYZpZdlePIrImoDF3qKmLvNcXOmShsD7OEJulGJ3Txyo\nywV4\r\n=Nzps\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbuPsQFmFBzYQaVkFxCmPeIM2KytsmzeTMJKy3vOfE6wIgGhhnkVcc/imeVy2lCneY7rratWF7Y/0xZi+ZnasYsGE="}]},"_npmUser":{"name":"dnlsndr","email":"daniel.schneider@eramux.com"},"directories":{},"maintainers":[{"name":"dnlsndr","email":"daniel.schneider@eramux.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/phosphor-vue_1.4.4_1643545552054_0.9952599392598378"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.5":{"name":"@dnlsndr/phosphor-vue","version":"1.4.5","description":"A clean and friendly icon family for Vue, too!","author":{"name":"rektdeckard"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/phosphor-icons/phosphor-vue.git"},"homepage":"https://phosphoricons.com","sideEffects":false,"types":"dist/phosphor-vue.es.d.ts","main":"dist/phosphor-vue.es.js","browser":"dist/phosphor-vue.es.js","module":"dist/phosphor-vue.es.js","unpkg":"dist/phosphor-vue.iife.js","keywords":["vue","icons","svg","phosphor","design","interface","UI","UX"],"scripts":{"serve":"vite","build":"vite build && vue-tsc --emitDeclarationOnly","compile":"vue-tsc --emitDeclarationOnly","analyze":"cross-env ANALYZE=true vite build","assemble":"node bin/assemble.js","format":"prettier --write ."},"dependencies":{},"devDependencies":{"@babel/core":"^7.16.12","@types/node":"^17.0.13","@vue/compiler-sfc":"^3.2.29","cross-env":"^7.0.3","rollup-plugin-visualizer":"^5.5.4","typescript":"^4.5.5","vite":"^2.7.13","vite-plugin-vue2":"^1.9.3","vue":"^2.6.14","vue-template-compiler":"^2.6.14","vue-tsc":"^0.31.1"},"peerDependencies":{"vue":"^2.6.14"},"engines":{"node":">=12"},"readme":"<img src=\"/meta/phosphor-mark-tight-yellow.png\" width=\"128\" align=\"right\" />\n\n# phosphor-vue\n\nPhosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at [phosphoricons.com](https://phosphoricons.com).\n\nFor Vue 3 support, check out the [vue3](https://github.com/phosphor-icons/phosphor-vue/tree/vue3) branch.\n\n[![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)\n\n[![GitHub stars](https://img.shields.io/github/stars/phosphor-icons/phosphor-vue?style=flat-square&label=Star)](https://github.com/phosphor-icons/phosphor-vue)\n[![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)\n[![GitHub watchers](https://img.shields.io/github/watchers/phosphor-icons/phosphor-vue?style=flat-square&label=Watch)](https://github.com/phosphor-icons/phosphor-vue)\n[![Follow on GitHub](https://img.shields.io/github/followers/rektdeckard?style=flat-square&label=Follow)](https://github.com/rektdeckard)\n\n## Installation\n\n```bash\nyarn add phosphor-vue\n```\n\nor\n\n```bash\nnpm install --save phosphor-vue\n```\n\n## Usage\n\n```html\n<template>\n  <div>\n    <ph-horse />\n    <ph-heart :size=\"32\" color=\"hotpink\" weight=\"fill\" />\n    <ph-cube />\n  </div>\n</template>\n\n<script>\n  import { PhHorse, PhHeart, PhCube } from \"phosphor-vue\";\n  export default {\n    name: \"App\",\n    components: {\n      PhHorse,\n      PhHeart,\n      PhCube,\n    },\n  };\n</script>\n```\n\n### Props\n\nIcon 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:\n\n- **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.\n- **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`.\n- **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.\n- **mirrored?**: `boolean` – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.\n\n### Composition\n\nPhosphor 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:\n\n```html\n<template>\n  <div>\n    <ph-horse /> {/* I'm lime-green, 32px, and bold! */} <ph-heart /> {/* Me\n    too! */} <ph-cube /> {/* Me three :) */}\n  </div>\n</template>\n\n<script>\n  import { PhHorse, PhHeart, PhCube } from \"phosphor-vue\";\n  export default {\n    name: \"App\",\n    components: {\n      PhHorse,\n      PhHeart,\n      PhCube,\n    },\n    provide: {\n      color: \"limegreen\",\n      size: 32,\n      weight: \"bold\",\n      mirrored: false,\n    },\n  };\n</script>\n```\n\nYou 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.\n\n**Note:** The **color**, **size**, **weight**, and **mirrored** properties are all _optional_ props when creating a context, but default to `\"currentColor\"`, `\"1em\"`, `\"regular\"` and `false`. Also be aware that when using this API, per Vue:\n\n> The `provide` and `inject` bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive.\n\n### Slots\n\n<img src=\"/meta/cube-rotate.svg\" width=\"128\" align=\"right\" />\n\nComponents have a `<slot>` for arbitrary SVG elements, so long as they are valid children of the `<svg>` element. This can be used to modify an icon with background layers or shapes, filters, animations and more. The slotted children will be placed _below_ the normal icon contents.\n\nThe following will cause the Cube icon to rotate and pulse:\n\n```html\n<template>\n  <ph-cube color=\"darkorchid\" weight=\"duotone\">\n    <animate\n      attributeName=\"opacity\"\n      values=\"0;1;0\"\n      dur=\"4s\"\n      repeatCount=\"indefinite\"\n    />\n    <animateTransform\n      attributeName=\"transform\"\n      attributeType=\"XML\"\n      type=\"rotate\"\n      dur=\"5s\"\n      from=\"0 0 0\"\n      to=\"360 0 0\"\n      repeatCount=\"indefinite\"\n    />\n  </ph-cube>\n</template>\n```\n\n**Note:** The coordinate space of slotted elements is relative to the contents of the icon `viewBox`, which is a 256x256 square. Only [valid SVG elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element#SVG_elements_by_category) will be rendered.\n\n## Our Related Projects\n\n- [phosphor-home](https://github.com/phosphor-icons/phosphor-home) ▲ Phosphor homepage and general info\n- [phosphor-react](https://github.com/phosphor-icons/phosphor-react) ▲ Phosphor icon component library for React\n- [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) ▲ Phosphor icons for Vanilla JS\n- [phosphor-flutter](https://github.com/phosphor-icons/phosphor-flutter) ▲ Phosphor IconData library for Flutter\n- [phosphor-webcomponents](https://github.com/phosphor-icons/phosphor-webcomponents) ▲ Phosphor icons as Web Components\n- [phosphor-figma](https://github.com/phosphor-icons/phosphor-figma) ▲ Phosphor icons Figma plugin\n- [phosphor-sketch](https://github.com/phosphor-icons/phosphor-sketch) ▲ Phosphor icons Sketch plugin\n\n## Community Projects\n\n- [phosphor-react-native](https://github.com/duongdev/phosphor-react-native) ▲ Phosphor icon component library for React Native\n- [phosphor-svelte](https://github.com/haruaki07/phosphor-svelte) ▲ Phosphor icons for Svelte apps\n- [phosphor-r](https://github.com/dreamRs/phosphoricons) ▲ Phosphor icon wrapper for R documents and applications\n- [blade-phosphor-icons](https://github.com/codeat3/blade-phosphor-icons) ▲ Phosphor icons in your Laravel Blade views\n\nIf you've made a port of Phosphor and you want to see it here, just open a PR [here](https://github.com/phosphor-icons/phosphor-home)!\n\n## License\n\nMIT © [phosphor-icons](https://github.com/phosphor-icons)\n","readmeFilename":"README.md","gitHead":"f819f2ed67e5d902f02c80bee3708133b1c53718","bugs":{"url":"https://github.com/phosphor-icons/phosphor-vue/issues"},"_id":"@dnlsndr/phosphor-vue@1.4.5","_nodeVersion":"16.13.1","_npmVersion":"8.3.2","dist":{"integrity":"sha512-xrktEnf9Kb38EfI5o3ES7RDv+XN+PFIKZI9jRHCs21VSFv0t3xv5IYTfJcVtwDe8LhW24AbMSi3ZY+3dzx6gFw==","shasum":"d05b4a61d6dcbd23736175783d85eb2f564bbf24","tarball":"https://registry.npmjs.org/@dnlsndr/phosphor-vue/-/phosphor-vue-1.4.5.tgz","fileCount":1056,"unpackedSize":16046150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9t+rCRA9TVsSAnZWagAAfgoQAJVH+GU4EbNCchRFLfUT\ns8CSYpnLcDrGQ0Xw2LBPkLf58gzF/R9A/DICjjkYn6UWCEUTtSBt5u3B6cQ1\naWVYSY9vI6+lMO6PMxWi4PoIXY+bltS1THM26MSsochhRp/ecqcTMIO6BjQ/\nhXqv7bG3MT7OFpRlfq22PcRmpMIRBX/WL0qab7/SoRySVULpeqEQNy1pZSVh\ny3qE2DNRY+3NyGZUIEGN3w5lwu5oHRjvJmyF70GWGSdecV9ZjkB/1SrsRj4y\njmMreBW/EZWNiL3qOG4msziPzUKQqf1Ee3i3n8l1Deq+Ce1l9OYS9phMYcQb\nFj5fTL/HUVl5Up1XEJB7R5314nsUEvLHlvjpL2654YOy3z0npwlimdLavjII\nGWbXHRf39PkoqfiME0m8otOQ2cF6ELGsaTJMQVYfzuqe+mG9Tw3+JXOk3n4J\n4b/qqVRWT+r6JfsH66kAvUlXE1s3gfow+AWLx9mjQmbvlUSg3WchQDyYypmH\nuDyhit8rGLXAFxaliLYWVuSPpeFec8lIgYfoKr70nv4O2LMYzz+HIkxfWIlq\nb+6RCzWqVAsvLT4iSgTZLjsFTEceZeg5z9QTpje0PetOM/vZUqa/yzw/yG/T\nPiKG0wmzZJTvWX3VBCwPJNDhnAsaoVRhVyan94/NRXC/uA5gnSq5G//jp8OY\nGIqI\r\n=eiD4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF20kNmErkJ1IE2UZ5CwMlVUgYggoXSyOpNJdANo17KkAiBPN9Lfi7t1P1pQZwFo/k/KbE0AFN60xiKLbnOrE3EUlg=="}]},"_npmUser":{"name":"dnlsndr","email":"daniel.schneider@eramux.com"},"directories":{},"maintainers":[{"name":"dnlsndr","email":"daniel.schneider@eramux.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/phosphor-vue_1.4.5_1643569066719_0.4941162711070317"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.6":{"name":"@dnlsndr/phosphor-vue","version":"1.4.6","description":"A clean and friendly icon family for Vue, too!","author":{"name":"rektdeckard"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/phosphor-icons/phosphor-vue.git"},"homepage":"https://phosphoricons.com","sideEffects":false,"types":"dist/phosphor-vue.es.d.ts","main":"dist/phosphor-vue.cjs.js","browser":"dist/phosphor-vue.es.js","module":"dist/phosphor-vue.es.js","unpkg":"dist/phosphor-vue.iife.js","keywords":["vue","icons","svg","phosphor","design","interface","UI","UX"],"scripts":{"serve":"vite","build":"vite build && vue-tsc --emitDeclarationOnly","compile":"vue-tsc --emitDeclarationOnly","analyze":"cross-env ANALYZE=true vite build","assemble":"node bin/assemble.js","format":"prettier --write ."},"dependencies":{},"devDependencies":{"@babel/core":"^7.16.12","@types/node":"^17.0.13","@vue/compiler-sfc":"^3.2.29","cross-env":"^7.0.3","rollup-plugin-visualizer":"^5.5.4","typescript":"^4.5.5","vite":"^2.7.13","vite-plugin-vue2":"^1.9.3","vue":"^2.6.14","vue-template-compiler":"^2.6.14","vue-tsc":"^0.31.1"},"peerDependencies":{"vue":"^2.6.14"},"engines":{"node":">=12"},"readme":"<img src=\"/meta/phosphor-mark-tight-yellow.png\" width=\"128\" align=\"right\" />\n\n# phosphor-vue\n\nPhosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at [phosphoricons.com](https://phosphoricons.com).\n\nFor Vue 3 support, check out the [vue3](https://github.com/phosphor-icons/phosphor-vue/tree/vue3) branch.\n\n[![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)\n\n[![GitHub stars](https://img.shields.io/github/stars/phosphor-icons/phosphor-vue?style=flat-square&label=Star)](https://github.com/phosphor-icons/phosphor-vue)\n[![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)\n[![GitHub watchers](https://img.shields.io/github/watchers/phosphor-icons/phosphor-vue?style=flat-square&label=Watch)](https://github.com/phosphor-icons/phosphor-vue)\n[![Follow on GitHub](https://img.shields.io/github/followers/rektdeckard?style=flat-square&label=Follow)](https://github.com/rektdeckard)\n\n## Installation\n\n```bash\nyarn add phosphor-vue\n```\n\nor\n\n```bash\nnpm install --save phosphor-vue\n```\n\n## Usage\n\n```html\n<template>\n  <div>\n    <ph-horse />\n    <ph-heart :size=\"32\" color=\"hotpink\" weight=\"fill\" />\n    <ph-cube />\n  </div>\n</template>\n\n<script>\n  import { PhHorse, PhHeart, PhCube } from \"phosphor-vue\";\n  export default {\n    name: \"App\",\n    components: {\n      PhHorse,\n      PhHeart,\n      PhCube,\n    },\n  };\n</script>\n```\n\n### Props\n\nIcon 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:\n\n- **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.\n- **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`.\n- **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.\n- **mirrored?**: `boolean` – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.\n\n### Composition\n\nPhosphor 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:\n\n```html\n<template>\n  <div>\n    <ph-horse /> {/* I'm lime-green, 32px, and bold! */} <ph-heart /> {/* Me\n    too! */} <ph-cube /> {/* Me three :) */}\n  </div>\n</template>\n\n<script>\n  import { PhHorse, PhHeart, PhCube } from \"phosphor-vue\";\n  export default {\n    name: \"App\",\n    components: {\n      PhHorse,\n      PhHeart,\n      PhCube,\n    },\n    provide: {\n      color: \"limegreen\",\n      size: 32,\n      weight: \"bold\",\n      mirrored: false,\n    },\n  };\n</script>\n```\n\nYou 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.\n\n**Note:** The **color**, **size**, **weight**, and **mirrored** properties are all _optional_ props when creating a context, but default to `\"currentColor\"`, `\"1em\"`, `\"regular\"` and `false`. Also be aware that when using this API, per Vue:\n\n> The `provide` and `inject` bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive.\n\n### Slots\n\n<img src=\"/meta/cube-rotate.svg\" width=\"128\" align=\"right\" />\n\nComponents have a `<slot>` for arbitrary SVG elements, so long as they are valid children of the `<svg>` element. This can be used to modify an icon with background layers or shapes, filters, animations and more. The slotted children will be placed _below_ the normal icon contents.\n\nThe following will cause the Cube icon to rotate and pulse:\n\n```html\n<template>\n  <ph-cube color=\"darkorchid\" weight=\"duotone\">\n    <animate\n      attributeName=\"opacity\"\n      values=\"0;1;0\"\n      dur=\"4s\"\n      repeatCount=\"indefinite\"\n    />\n    <animateTransform\n      attributeName=\"transform\"\n      attributeType=\"XML\"\n      type=\"rotate\"\n      dur=\"5s\"\n      from=\"0 0 0\"\n      to=\"360 0 0\"\n      repeatCount=\"indefinite\"\n    />\n  </ph-cube>\n</template>\n```\n\n**Note:** The coordinate space of slotted elements is relative to the contents of the icon `viewBox`, which is a 256x256 square. Only [valid SVG elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element#SVG_elements_by_category) will be rendered.\n\n## Our Related Projects\n\n- [phosphor-home](https://github.com/phosphor-icons/phosphor-home) ▲ Phosphor homepage and general info\n- [phosphor-react](https://github.com/phosphor-icons/phosphor-react) ▲ Phosphor icon component library for React\n- [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) ▲ Phosphor icons for Vanilla JS\n- [phosphor-flutter](https://github.com/phosphor-icons/phosphor-flutter) ▲ Phosphor IconData library for Flutter\n- [phosphor-webcomponents](https://github.com/phosphor-icons/phosphor-webcomponents) ▲ Phosphor icons as Web Components\n- [phosphor-figma](https://github.com/phosphor-icons/phosphor-figma) ▲ Phosphor icons Figma plugin\n- [phosphor-sketch](https://github.com/phosphor-icons/phosphor-sketch) ▲ Phosphor icons Sketch plugin\n\n## Community Projects\n\n- [phosphor-react-native](https://github.com/duongdev/phosphor-react-native) ▲ Phosphor icon component library for React Native\n- [phosphor-svelte](https://github.com/haruaki07/phosphor-svelte) ▲ Phosphor icons for Svelte apps\n- [phosphor-r](https://github.com/dreamRs/phosphoricons) ▲ Phosphor icon wrapper for R documents and applications\n- [blade-phosphor-icons](https://github.com/codeat3/blade-phosphor-icons) ▲ Phosphor icons in your Laravel Blade views\n\nIf you've made a port of Phosphor and you want to see it here, just open a PR [here](https://github.com/phosphor-icons/phosphor-home)!\n\n## License\n\nMIT © [phosphor-icons](https://github.com/phosphor-icons)\n","readmeFilename":"README.md","gitHead":"f819f2ed67e5d902f02c80bee3708133b1c53718","bugs":{"url":"https://github.com/phosphor-icons/phosphor-vue/issues"},"_id":"@dnlsndr/phosphor-vue@1.4.6","_nodeVersion":"16.13.1","_npmVersion":"8.3.2","dist":{"integrity":"sha512-AP9uYmyAbUVooXQjnu7PnpIN846jGL5xj9TJQpXNyRHx7sJZOjckKLS9pN44JIUXUnxXJ7ZtgbAqgFpv8v475A==","shasum":"7cf58026f63c3a6630665753a07a380e85eb6b59","tarball":"https://registry.npmjs.org/@dnlsndr/phosphor-vue/-/phosphor-vue-1.4.6.tgz","fileCount":1057,"unpackedSize":20836077,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9uSUCRA9TVsSAnZWagAA88wP/3jpg+MVwDdJQ7yAbnCK\nVdWxLWzFE3EtW0wV8kcXUa04Wrgc6JotQ3ov8606Jna8CM5JeCTbFGX+8ic/\n0ynztaBBaL0GKXTdGvm+lFJ//fKMWuNeiCGHksKolvqT/FL4llKvr/xR1LqX\n3wPhlDkpvNtV6ygAeq5sNFHAWZOT/OIsYSDT+vRmsOB59tpMmEHg6gwHhPA2\n4z6LPOa9cWThG2r+8NBOBbXB1si777fX06xpC5008bn6X+3eCPmoq+GRLAqK\n7UQTacFm5Lnu14Y5eWI0KKRrySwH0yyffU94j6hxP93J9RFlKiSmgBxz8TbX\nWkeEW4Tt2jl8QxFgSP6dKC5cY9fnDgOfeO3Eu6RqbN+nXyPFsyYKEXDr1AMb\n10edeWVZDWPOMU2V3O0m2sQo8/kqUKuwwskl2Z0yVNGIN6a+0v2Jcfho7fFy\n2jwsGymkaNX6PrWhLgH9VV3B6yu4wHoTJoSnt3QklmaHchnuu6USvX9a/4IT\nF0mxTO1XyLr5N5pK4Wn+Nj+yM5AwwGaACw6YdR4qHi7lrwZGGKRVtHl+C0Yv\n8H+6t8QPaCB+Bm+sl0bQtVaUQ+4NgtgnZUDPfeyL/EUrxJwnb7QJRhDaG/UR\nXR3od5VHZDaB0rE5UzM1XdSi/x6ByuQbhkl5/bKkvTaJG2yGEzbl4d7j34j/\nCxEc\r\n=LBe5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDrph/XR6rVn43fX9N2qTd0TQxEzAhqPzC6jnPTN1ukgIgT/n1tpxfwg5g40aBR1PT8HsCqqhGmveER2WAz0jIZn0="}]},"_npmUser":{"name":"dnlsndr","email":"daniel.schneider@eramux.com"},"directories":{},"maintainers":[{"name":"dnlsndr","email":"daniel.schneider@eramux.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/phosphor-vue_1.4.6_1643570323607_0.0286716947162462"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.7.0":{"name":"@dnlsndr/phosphor-vue","version":"1.7.0","description":"A clean and friendly icon family for Vue, too!","author":{"name":"rektdeckard"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/phosphor-icons/vue-phosphor-icons.git"},"homepage":"https://phosphoricons.com","sideEffects":false,"types":"dist/vue-phosphor-icons.es.d.ts","main":"dist/vue-phosphor-icons.umd.js","browser":"dist/vue-phosphor-icons.es.js","module":"dist/vue-phosphor-icons.es.js","unpkg":"dist/vue-phosphor-icons.iife.js","keywords":["vue","icons","svg","phosphor","design","interface","UI","UX"],"scripts":{"serve":"vite","build":"vite build && vue-tsc --emitDeclarationOnly","compile":"vue-tsc --emitDeclarationOnly","analyze":"cross-env ANALYZE=true vite build","assemble":"node bin/assemble.js","format":"prettier --write ."},"dependencies":{},"devDependencies":{"@babel/core":"^7.17.2","@types/node":"^17.0.17","@vue/compiler-sfc":"^3.2.31","@vitejs/plugin-vue":"^2.1.0","cross-env":"^7.0.3","rollup-plugin-visualizer":"^5.5.4","typescript":"^4.5.5","vite":"^2.8.1","vue":"^3.2.31","vue-tsc":"^0.31.3"},"peerDependencies":{"vue":"^3.2.31"},"engines":{"node":">=16"},"readme":"<img src=\"/meta/phosphor-mark-tight-yellow.png\" width=\"128\" align=\"right\" />\n\n# vue-phosphor-icons\n\nPhosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at [phosphoricons.com](https://phosphoricons.com).\n\nFor Vue 3 support, check out the [vue3](https://github.com/phosphor-icons/vue-phosphor-icons/tree/vue3) branch.\n\n[![NPM](https://img.shields.io/npm/v/vue-phosphor-icons.svg?style=flat-square)](https://www.npmjs.com/package/vue-phosphor-icons) [![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/vue-phosphor-icons.svg?style=flat-square)](https://travis-ci.com/github/rektdeckard/vue-phosphor-icons)\n\n[![GitHub stars](https://img.shields.io/github/stars/phosphor-icons/vue-phosphor-icons?style=flat-square&label=Star)](https://github.com/phosphor-icons/vue-phosphor-icons)\n[![GitHub forks](https://img.shields.io/github/forks/phosphor-icons/vue-phosphor-icons?style=flat-square&label=Fork)](https://github.com/phosphor-icons/vue-phosphor-icons/fork)\n[![GitHub watchers](https://img.shields.io/github/watchers/phosphor-icons/vue-phosphor-icons?style=flat-square&label=Watch)](https://github.com/phosphor-icons/vue-phosphor-icons)\n[![Follow on GitHub](https://img.shields.io/github/followers/rektdeckard?style=flat-square&label=Follow)](https://github.com/rektdeckard)\n\n## Installation\n\n```bash\nyarn add vue-phosphor-icons\n```\n\nor\n\n```bash\nnpm install --save vue-phosphor-icons\n```\n\n## Usage\n\n```html\n<template>\n  <div>\n    <ph-horse />\n    <ph-heart :size=\"32\" color=\"hotpink\" weight=\"fill\" />\n    <ph-cube />\n  </div>\n</template>\n\n<script>\n  import { PhHorse, PhHeart, PhCube } from \"vue-phosphor-icons\";\n  export default {\n    name: \"App\",\n    components: {\n      PhHorse,\n      PhHeart,\n      PhCube,\n    },\n  };\n</script>\n```\n\n### Props\n\nIcon 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:\n\n- **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.\n- **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`.\n- **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.\n- **mirrored?**: `boolean` – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.\n\n### Composition\n\nPhosphor 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:\n\n```html\n<template>\n  <div>\n    <ph-horse /> {/* I'm lime-green, 32px, and bold! */} <ph-heart /> {/* Me\n    too! */} <ph-cube /> {/* Me three :) */}\n  </div>\n</template>\n\n<script>\n  import { PhHorse, PhHeart, PhCube } from \"vue-phosphor-icons\";\n  export default {\n    name: \"App\",\n    components: {\n      PhHorse,\n      PhHeart,\n      PhCube,\n    },\n    provide: {\n      color: \"limegreen\",\n      size: 32,\n      weight: \"bold\",\n      mirrored: false,\n    },\n  };\n</script>\n```\n\nYou 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.\n\n**Note:** The **color**, **size**, **weight**, and **mirrored** properties are all _optional_ props when creating a context, but default to `\"currentColor\"`, `\"1em\"`, `\"regular\"` and `false`. Also be aware that when using this API, per Vue:\n\n> The `provide` and `inject` bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive.\n\n### Slots\n\n<img src=\"/meta/cube-rotate.svg\" width=\"128\" align=\"right\" />\n\nComponents have a `<slot>` for arbitrary SVG elements, so long as they are valid children of the `<svg>` element. This can be used to modify an icon with background layers or shapes, filters, animations and more. The slotted children will be placed _below_ the normal icon contents.\n\nThe following will cause the Cube icon to rotate and pulse:\n\n```html\n<template>\n  <ph-cube color=\"darkorchid\" weight=\"duotone\">\n    <animate\n      attributeName=\"opacity\"\n      values=\"0;1;0\"\n      dur=\"4s\"\n      repeatCount=\"indefinite\"\n    />\n    <animateTransform\n      attributeName=\"transform\"\n      attributeType=\"XML\"\n      type=\"rotate\"\n      dur=\"5s\"\n      from=\"0 0 0\"\n      to=\"360 0 0\"\n      repeatCount=\"indefinite\"\n    />\n  </ph-cube>\n</template>\n```\n\n**Note:** The coordinate space of slotted elements is relative to the contents of the icon `viewBox`, which is a 256x256 square. Only [valid SVG elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element#SVG_elements_by_category) will be rendered.\n\n## Our Related Projects\n\n- [phosphor-home](https://github.com/phosphor-icons/phosphor-home) ▲ Phosphor homepage and general info\n- [phosphor-react](https://github.com/phosphor-icons/phosphor-react) ▲ Phosphor icon component library for React\n- [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) ▲ Phosphor icons for Vanilla JS\n- [phosphor-flutter](https://github.com/phosphor-icons/phosphor-flutter) ▲ Phosphor IconData library for Flutter\n- [phosphor-webcomponents](https://github.com/phosphor-icons/phosphor-webcomponents) ▲ Phosphor icons as Web Components\n- [phosphor-figma](https://github.com/phosphor-icons/phosphor-figma) ▲ Phosphor icons Figma plugin\n- [phosphor-sketch](https://github.com/phosphor-icons/phosphor-sketch) ▲ Phosphor icons Sketch plugin\n\n## Community Projects\n\n- [phosphor-react-native](https://github.com/duongdev/phosphor-react-native) ▲ Phosphor icon component library for React Native\n- [phosphor-svelte](https://github.com/haruaki07/phosphor-svelte) ▲ Phosphor icons for Svelte apps\n- [phosphor-r](https://github.com/dreamRs/phosphoricons) ▲ Phosphor icon wrapper for R documents and applications\n- [blade-phosphor-icons](https://github.com/codeat3/blade-phosphor-icons) ▲ Phosphor icons in your Laravel Blade views\n\nIf you've made a port of Phosphor and you want to see it here, just open a PR [here](https://github.com/phosphor-icons/phosphor-home)!\n\n## License\n\nMIT © [phosphor-icons](https://github.com/phosphor-icons)\n","readmeFilename":"README.md","gitHead":"aba8186c4533f12fcb7343b6d3c1af1a3f6e92c2","bugs":{"url":"https://github.com/phosphor-icons/vue-phosphor-icons/issues"},"_id":"@dnlsndr/phosphor-vue@1.7.0","_nodeVersion":"16.13.2","_npmVersion":"8.4.0","dist":{"integrity":"sha512-HETtyvyTzGcCixEv+WeaE0OxrREj8OCC0px6bbj+vd6ruGisyarVZjRi0OfA3hvXi9CNEF/fAcE0AK2i6MtRbg==","shasum":"95e555cb916cc36aef18a7ba6e4f1119410743a1","tarball":"https://registry.npmjs.org/@dnlsndr/phosphor-vue/-/phosphor-vue-1.7.0.tgz","fileCount":1056,"unpackedSize":28951103,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCM9oCRA9TVsSAnZWagAACXcP/2yZ1bEpQ+12hTE+1USo\nwPn1cU9Q+XkH7cVSWjNJqH2kodRkktspgdSwTDn6COCsxQZnP40Kde5hJKgn\nuPCD4l/HSWu/sMECXIY6u2i0niJT7xKKnnNQpl94zal19+e4f5T8AgEKUUMi\nOBK1zkwqZiPyPXbLXN/Z5LMddMnWcbWPQydadH/eO/B9udg9rB5hAg64uW6r\nWnF/4PrOh4cd4IHbVlgkorHGbI9qZEn42mHWKqC7m2ccFKKcIZ9C+hvvRVtE\nlsMIna9wdgLT47z5fdJEgLJIMTp8mGkPJKf1hzqPeWzijcKZwlCV6di902od\nQIZB22sg8mqXNoFnwcfAflAW9eZqnbaxSDtcasyO/H4mujOAnMCv5+QJenvK\nniq/7q2+71GDTqnG0LZJVh8K4/+Rs5O519303yzh8VWllWG8z+XRaxFh1wkG\nx0rqNbzXOmvBjDlfe98KhTjzhOU7fJWXuqTyjErlLPGyou1xfwi39bFqDb2C\nKxNRysfloVvubZ2/Ai4hEVoTsi5J9VhkoucvLWPJ9MqhSWjEK9fH/gcGs5Th\nwrqGyit64fjk2pwaZ1PKVecuzfbvf/5070oKqzzwursPCCUiMgzrAKlfPIyO\nPepJyxX+KurRyodu/HviTGfw+/0VaWGlSoxt80oIEaNmZ0dNHrf+OlJIVjsf\nyMXM\r\n=hlpQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrSC8RrnVNNrWMu4mCTNg0Btdjd+lEGnAWZXrLMwp6uAIhANSAezfkrh+/ieY8a24xwukWUx4MpinX5O78bi7ngvMA"}]},"_npmUser":{"name":"dnlsndr","email":"daniel.schneider@eramux.com"},"directories":{},"maintainers":[{"name":"dnlsndr","email":"daniel.schneider@eramux.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/phosphor-vue_1.7.0_1644744552418_0.35019115542175516"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2022-01-30T11:50:09.738Z","1.4.0":"2022-01-30T11:50:09.961Z","modified":"2023-01-28T09:05:42.631Z","1.4.1":"2022-01-30T11:57:33.312Z","1.4.2":"2022-01-30T12:09:31.470Z","1.4.3":"2022-01-30T12:13:45.474Z","1.4.4":"2022-01-30T12:25:52.291Z","1.4.5":"2022-01-30T18:57:47.140Z","1.4.6":"2022-01-30T19:18:44.150Z","1.7.0":"2022-02-13T09:29:12.650Z"},"maintainers":[{"name":"dnlsndr","email":"daniel.schneider@eramux.com"}],"description":"A clean and friendly icon family for Vue, too!","homepage":"https://phosphoricons.com","keywords":["vue","icons","svg","phosphor","design","interface","UI","UX"],"repository":{"type":"git","url":"git+https://github.com/phosphor-icons/phosphor-vue.git"},"author":{"name":"rektdeckard"},"bugs":{"url":"https://github.com/phosphor-icons/phosphor-vue/issues"},"license":"MIT","readme":"","readmeFilename":""}