# phosphor-vue Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at [phosphoricons.com](https://phosphoricons.com). For Vue 3 support, check out the [vue3](https://github.com/phosphor-icons/phosphor-vue/tree/vue3) branch. [](https://www.npmjs.com/package/phosphor-vue) [](https://standardjs.com) [](https://travis-ci.com/github/rektdeckard/phosphor-vue) [](https://github.com/phosphor-icons/phosphor-vue) [](https://github.com/phosphor-icons/phosphor-vue/fork) [](https://github.com/phosphor-icons/phosphor-vue) [](https://github.com/rektdeckard) ## Installation ```bash yarn add phosphor-vue ``` or ```bash npm install --save phosphor-vue ``` ## Usage ```html ``` ### 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`. Also be aware that when using this API, per Vue: > 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. ### Slots Components have a `` for arbitrary SVG elements, so long as they are valid children of the `