Nachos Pillage Milwaukee

    vue-avataaars

    0.0.4 • Public • Published

    GitHub tag (latest by date) PRs welcome Gitter GitHub

    Vue js component for Avataaars

    Try it here : https://xledocteurx.github.io/vue-avataaars/

    This is a port from Sketch library Avataaars designed by Pablo Stanley.

    I am deeply sorry for the first 80 users who downloaded it. I had ( and maybe still have some troubles with the distribution of this plugin as it is my first npm package. If the classic way of importing the component does not work. please use the src folder found in nodes_modules/vue-avataaars )

    Features

    • SVG based
    • Light weight
    • Scalable
    • Easy to use
    • Easy to integrate with custom editor
    • Comes from Avataaars

    Roadmap to 0.0.x

    • Clothes graphics.

    Roadmap to 0.1.0

    • Feed the Avataaars component with a string or an email hash to procedurally generate an avatar. ( Just like the way the gravatar API works )

    Roadmap to 0.2.0

    • Fully customizable Avataaars editor.
    • Getting rid of Bootstrap Vue in the editor.

    Roadmap to 1.0.0

    • PNG export/generation

    Roadmap to success

    • Providing an open Web API like lorempicsum or gravatar.

    How it works

    Import the Avataaars component. Pass it an object called "avatarOptions" with some parameters. Let the magic happen.

    Installation

    npm install vue-avataaars --save
    

    Usage

    • Using the Avataaars component with an avatarOptions input :
      <template>
        <Avataaars 
        // You can any size as it does not exceed the maxWidth and maxHeight properties
        :width=200
        :height=200
        // Your avatar options
        :avatarOptions="{
          backgroundType: selectedBackgroundType,
          backgroundColor: selectedBackgroundColor,
          skinColor: selectedSkinColor,
          clothesType: selectedClothesType,
          clothesColor: selectedClothesColor,
          clothesGraphicsType: selectedClothesGraphicType,
          eyesType: selectedEyesType,
          eyebrowType: selectedEyebrowType,
          mouthType: selectedMouthType,
          facialHairType: selectedFacialHairType,
          facialHairColor: selectedFacialHairColor,
          accessoriesType: selectedAccessoriesType,
          topType: selectedTopType,
          topColor: selectedTopColor,
        }" />
      </template>
     
      <script>
      import Avataaars from 'vue-avataaars'
     
      export default {
        name: 'Your component',
        components: {
          Avataaars,
        },
      </script>
    • Using the Avataaars for random avatar generation :
      <template>
        // No props, no problems
        <Avataaars />
      </template>
      
      <script>
      import Avataaars from 'vue-avataaars'
     
      export default {
        name: 'Your component',
        components: {
          Avataaars,
        },
      </script>

    Props for the Avataaars component

        iconName: {
          type: String,
          default: 'avatar',
          required: false,
        },
        width: {
          type: Number,
          default: 264,
          required: false,
        },
        height: {
          type: Number,
          default: 280,
          required: false,
        },
        maxWidth: {
          type: Number,
          default: 264,
          required: false,
        },
        maxHeight: {
          type: Number,
          default: 280,
          required: false,
        },
        avatarOptions: {
          type: Object, required: false
        },

    Props of avatarOptions

    {
        "backgroundType": ["circle", "transparent"],
        "backgroundColor": ["black", "blue01", "blue02", "blue03", "gray01", "gray02", "heather", "pastelBlue", "pastelGreen", "pastelOrange", "pastelRed", "pastelYellow", "pink", "red", "white"],
    
        "skinColor": ["tanned", "yellow", "pale", "light", "brown", "darkBrown", "dark"],
    
        "clothesType": ["blazerShirt", "blazerSweater", "collarSweater", "graphicShirt", "hoodie", "overall", "shirtCrewNeck", "shirtScoopNeck", "shirtVNeck"],
        "clothesColor": ["black", "blue01", "blue02", "blue03", "gray01", "gray02", "heather", "pastelBlue", "pastelGreen", "pastelOrange", "pastelRed", "pastelYellow", "pink", "red", "white"],
        "clothesGraphicsType": ["none", "bat", "cumbia", "diamond", "pizza", "resist", "selena", "bear", "skullOutline", "skull"],
        
        "eyebrowType": ["angry", "angryNatural", "default", "defaultNatural", "flatNatural", "frownNatural", "raisedExcited", "raisedExcitedNatural", "sadConcerned", "sadConcernedNatural", "unibrowNatural", "updown", "updownNatural"],
        "eyesType": ["close", "cry", "default", "dizzy", "eyeroll", "happy", "hearts", "side", "squint", "surprised", "wink", "winkWacky"],
        "mouthType": ["concerned", "default", "disbelief", "eating", "grimace", "sad", "screamOpen", "serious", "smile", "tongue", "twinkle", "vomit"],
        
        "facialHairType": ["none", "beardMedium", "beardLight", "beardMajestic", "moustacheFancy", "moustacheMagnum"],
        "facialHairColor": ["auburn", "black", "blonde", "blondeGolden", "brown", "brownDark", "platinum", "red"],
    
        "accessoriesType": ["none", "eyepatch", "kurt", "prescription01", "prescription02", "round"],
        "topType": ["none", "hat", "hijab", "turban", "winterHat1", "winterHat2", "winterHat3", "winterHat4", "longHairBigHair", "longHairBob", "longHairBun", "longHairCurly", "longHairCurvy", "longHairDreads", "longHairFro", "longHairFroBand", "longHairNotTooLong", "longHairShavedSides", "longHairMiaWallace", "longHairStraight", "longHairStraight2", "longHairStraightStrand", "shortHairDreads01", "shortHairDreads02", "shortHairFrizzle", "shortHairShaggyMullet", "shortHairShortCurly", "shortHairShortFlat", "shortHairShortRound", "shortHairShortWaved", "shortHairSides", "shortHairTheCaesar", "shortHairTheCaesarSidePart"],
        "topColor": [
            "auburn", "black", "blonde", "blondeGolden", "brown", "brownDark", "platinum", "red",
            "blue01", "blue02", "blue03", "gray01", "gray02", "heather", "pastelBlue", "pastelGreen", "pastelOrange", "pastelRed", "pastelYellow", "pink", "red", "white"
        ]
    }
    

    Install

    npm i vue-avataaars

    DownloadsWeekly Downloads

    5

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    1.9 MB

    Total Files

    143

    Last publish

    Collaborators

    • ledocteur