Noodle Printing Machine

    @singleway/avatars-generator
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.8 • Public • Published

    Vue component for Avatars

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

    Features

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

    How it works

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

    Installation

    npm install @singleway/avatars-generator --save
    

    Usage

    • Using the Avataaars component with an avatarOptions input :
      <template>
        <Avataaars 
        // You can set any size as it does not exceed the maxWidth and maxHeight properties (264px by 280px)
        :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,
        },
        avatarOptions: {
          type: Object, required: false
        },

    Props of avatarOptions

    A complete list of every options can be found here in the "./scr/avataaarsOptions.json"

    Install

    npm i @singleway/avatars-generator

    DownloadsWeekly Downloads

    17

    Version

    0.0.8

    License

    MIT

    Unpacked Size

    497 kB

    Total Files

    9

    Last publish

    Collaborators

    • intellegence_inc