phosphor-vue

phosphor-vue

A clear, playful, and adaptable icon family for Vue, too!

Installation

yarn add phosphor-vue

or

npm install --save phosphor-vue

Usage

<template>
  <div>
    <Horse />
    <Heart />
    <Cube />
  </div>
</template>

<script>
import Vue from "vue";
import { Horse, Heart, Cube } from "phosphor-vue";
export default {
  name: "PhosphorVue",
  components: {
    Horse,
    Heart,
    Cube,
  },
};
</script>

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, and more. 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:

<template>
  <div>
    <Horse /> {/* I'm lime-green, 32px, and bold! */}
    <Heart /> {/* Me too! */}
    <Cube />  {/* Me three :) */}
  </div>
</template>

<script>
import Vue from "vue";
import { Horse, Heart, Cube } from "phosphor-vue";

export default {
  name: "PhosphorVue",
  components: {
    Horse,
    Heart,
    Cube,
  },
  provide: {
    color: "limegreen",
    size: 32,
    weight: "bold",
    mirrored: false,
  },
};
</script>

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.

License

GPL-3.0 © phosphor-icons