npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-bigheads

v0.2.1

Published

BigHeads library by @RobertBroersma ported to Vue, with some added extra features

Downloads

166

Readme

Easily generate avatars for your projects with Big Heads.

This is the Vue version of the original Big Heads library by @RobertBroersma. https://bigheads.io

Installation

yarn add vue-bigheads

or

npm install vue-bigheads --save

then, in your app you can import globally:

Import globally

import Vue from "vue";
import VueBigHeads from "vue-bigheads";

Vue.use(VueBigHeads);

or import locally:

import { BigHead } from "vue-bigheads";

export default {
  components: {
    BigHead,
  },
};

Usage

<BigHead
  accessory="shades"
  body="chest"
  clothing="tankTop"
  clothingColor="black"
  eyebrows="angry"
  eyes="wink"
  facialHair="mediumBeard"
  facialHairColor="black"
  graphic="vue"
  hair="short"
  hairColor="black"
  hat="none"
  hatColor="green"
  lashes="false"
  lipColor="purple"
  mouth="open"
  shape="circle"
  shapeColor="blue"
  skinTone="brown"
/>

Please note that the mask and circleColor props from the original library have been replaced with shape and shapeColor respectively, to allow for more mask shapes. A new prop facialHairColor has been added to allow you to customise facial hair color seperately from the normal hair color.

Some possible values for the props above have been changed, as outlined below:

Props

Leaving a prop empty will result in a random value being chosen. | Property | Possible values | | ------------------ | -------------------------- | | accessory | 'none', 'faceMask', 'hoopEarrings', 'roundGlasses', 'shades', 'tinyGlasses' | | body | 'chest', 'breasts' | | clothing | 'naked', 'chequeredShirt', 'chequeredShirtDark', 'shirt', 'denimJacket', 'dressShirt', 'hoodie', 'vneck', 'tankTop', 'dress' | | clothingColor | 'white', 'gray', 'black', 'red', 'lightRed', 'orange', 'lightOrange', 'yellow', 'lightYellow', 'green', 'lightGreen', 'turqoise', 'lightTurqoise', 'blue', 'lightBlue', 'pink', 'lightPink', 'purple', 'lighPurple' | | eyebrows | 'none', 'angry', 'concerned', 'leftLowered', 'raised', 'serious' | | eyes | 'normal', 'content', 'crazy', 'cute', 'cyborg', 'dizzy', 'dollars', 'eyePatch', 'eyePatch2', 'happy', 'hearts', 'leftTwitch', 'squint', 'simple', 'stars', 'wink' | | facialHair | 'none', 'goatee', 'mediumBeard', 'stubble' | | facialHairColor | 'white', 'silver', 'blonde', 'brown', 'black', 'red', 'lightRed', 'orange', 'lightOrange', 'green', 'lightGreen', 'turqoise', 'lightTurqoise', 'blue', 'lightBlue', 'pink', 'lightPink', 'purple', 'lighPurple' | | graphic | 'none', 'donut', 'gatsby', 'graphQL', 'rainbow', 'react', 'redwood', 'vue' | | hair | 'none', 'afro', 'balding', 'bob', 'bun', 'buzz', 'long', 'mohawk', 'pixie', 'short' | | hairColor | 'white', 'silver', 'blonde', 'brown', 'black', 'red', 'lightRed', 'orange', 'lightOrange', 'green', 'lightGreen', 'turqoise', 'lightTurqoise', 'blue', 'lightBlue', 'pink', 'lightPink', 'purple', 'lighPurple' | | hat | 'none', 'beanie', 'hijab', 'partyHat', 'turban' | | hatColor | 'white', 'gray', 'black', 'red', 'lightRed', 'orange', 'lightOrange', 'yellow', 'lightYellow', 'green', 'lightGreen', 'turqoise', 'lightTurqoise', 'blue', 'lightBlue', 'pink', 'lightPink', 'purple', 'lighPurple' | | lashes | 'true', 'false' | | lipColor | 'red', 'lightRed', 'green', 'lightGreen', 'turqoise', 'lightTurqoise', 'blue','lightBlue', 'pink', 'lightPink', 'purple', 'lightPurple' | | mouth | 'grin', 'lips', 'open', 'openSmile', 'piercedTongue', 'sad', 'serious', 'tongue', 'vomitingRainbow' | | shape | 'none', 'circle', 'square', 'squircle' | | shapeColor | 'red', 'orange', 'yellow', 'green', 'turqoise', 'blue', 'pink', 'purple' | | skinTone | 'light', 'yellow', 'brown', 'dark', 'red', 'black' |

Custom colors

All color related props (i.e. clothingColor, facialHairColor, hairColor, hatColor, lipColor, shapeColor) support custom values. Instead of passing one of the color names above, pass an object with a base and shadow color.

Only HEX colors (3 or 6 characters, with the hash symbol before it) are supported - you cannot use RGB or HSL.

The shapeColor props only uses the base color, so the shadow color can be omitted.

Example:

<BigHead
  ...
  :clothingColor="{ base: '#5CCBF1', shadow: '#49B5CD' }"
  ...
/>

Custom designs

Some props (accessory, eyebrows, eyes, facialHair, graphic, mouth, skinTone) can be extended with your own designs and colors.

Illustrations

All of the above props, except skinTone, are expandable by passing an object containing Vue single file components when loading the plugin.

Here's an example of a custom illustration component:

<template>
  <g>
    <path
      d="[...]"
      :fill="color.base"
      :stroke="colors.outline"
      stroke-width="12"
    />
    <path
      d="[...]"
      :fill="color.shadow"
    />
  </g>
</template>

<script>
import { colors } from 'vue-bigheads';

export default {
  name: 'MyGraphic',
  props: ['color', 'skin'],
  data() {
    return {
      colors,
    }
  },
}
</script>

The props passed to each component vary depending on what prop you attach it to: | Parameter | Props | | --------------------- | -------------------------- | | accessory | skin | | eyebrows | skin | | eyes | skin, withLashes | | facialHair | skin, color | | graphic | | | mouth | skin, lipColor |

skin, color and lipColor are instances of the color object, which have a base and shadow property.

withLashes is a boolean that reflects the value of the lashes prop.

Colors

The skinTone prop is expandable by passing an object containing color classes (see 'Custom colors' section).

Example config

import Vue from "vue";
import VueBigHeads from "vue-bigheads";
import MyCustomEyes from "./components/MyCustomEyes.vue";

Vue.use(VueBigHeads, {
  eyes: {
    mycustomdesign: MyCustomEyes
  },
  skinTone: {
    purple: {
      base: "#B256A1",
      shadow: "#9C4490",
    }
  }
});

Use in your app

<BigHead
  ...
  eyes="mycustomdesign"
  skinTone="purple"
/>