Skip to content
This repository has been archived by the owner on Jan 4, 2024. It is now read-only.
/ holiday-avatar Public archive

Vue library for generating nice user avatar. (Inspired by react-nice-avatar)

License

Notifications You must be signed in to change notification settings

holiday-lab/holiday-avatar

Repository files navigation

English | 简体中文

holiday-avatar

Introduction

Vue library for generating nice user avatar. (Inspired by react-nice-avatar)

Version npm download

Online Editor / Preview

Assets

Installation

npm install holiday-avatar
# or
yarn add holiday-avatar
# or
pnpm install holiday-avatar

Usage

Import Directly (Recommended)

You can import component directly and use it. In this form, only components imported will be bundled.

<template>
  <HldAvatar />
</template>

<script>
import { defineComponent } from 'vue';
import { Avatar } from 'holiday-avatar';

export default defineComponent({
  components: {
    HldAvatar: Avatar,
  },
});
</script>

or

<template>
  <hld-avatar></hld-avatar>
</template>

<script>
import { defineComponent } from 'vue';
import { Avatar } from 'holiday-avatar';

export default defineComponent({
  components: {
    HldAvatar: Avatar,
  },
});
</script>

Install Globally (Not Recommended)

No tree-shaking. Bundle will have redundant codes.

import { createApp } from 'vue';
import App from './App.vue';
import Avatar from 'holiday-avatar';

createApp(App).use(Avatar).mount('#app');

After the installation. You can use all the components in you SFC like this.

<template>
  <HldAvatar />
</template>

or

<template>
  <hld-avatar></hld-avatar>
</template>

Generate Config

Generate random config, the config can be saved into your database to use later.

<template>
  <HldAvatar v-bind="{ ...config }" />
</template>

<script>
import { defineComponent } from 'vue';
import { Avatar, genConfig } from 'holiday-avatar';

export default defineComponent({
  components: {
    HldAvatar: Avatar,
  },
  setup() {
    const config = genConfig();

    return {
      config,
    };
  },
});
</script>

If you need to customize the configuration, there are two ways to provide you with the ability to customize.

<template>
  <HldAvatar v-bind="{ ...config }" />
</template>

<script>
import { defineComponent } from 'vue';
import { Avatar, genConfig } from 'holiday-avatar';

export default defineComponent({
  components: {
    HldAvatar: Avatar,
  },
  setup() {
    // You can also pass in other options in the option list below. e.g. `{ sex: 'female', eyeType: 'smile' }`
    const config = genConfig({ bgColor: '#000' });

    return {
      config,
    };
  },
});
</script>

or

<template>
  <!-- You can also pass in other options in the option list below with kebab-case. e.g. `sex="female" eye-type="smile"` -->
  <HldAvatar v-bind="{ ...config }" bg-color="#000" />
</template>

<script>
import { defineComponent } from 'vue';
import { Avatar, genConfig } from 'holiday-avatar';

export default defineComponent({
  components: {
    HldAvatar: Avatar,
  },
  setup() {
    const config = genConfig();

    return {
      config,
    };
  },
});
</script>

NOTE: The latter option will override the previous!

<template>
  <!-- `bg-color` will be overridden as `#fff` -->
  <HldAvatar v-bind="{ ...config }" bg-color="#fff" />
</template>

<script>
import { defineComponent } from 'vue';
import { Avatar, genConfig } from 'holiday-avatar';

export default defineComponent({
  components: {
    HldAvatar: Avatar,
  },
  setup() {
    const config = genConfig({ bgColor: '#000' });

    return {
      config,
    };
  },
});
</script>

Same as above.

<template>
  <!-- `bg-color` will be overridden as `#000` -->
  <HldAvatar bg-color="#fff" v-bind="{ ...config }" />
</template>

<script>
import { defineComponent } from 'vue';
import { Avatar, genConfig } from 'holiday-avatar';

export default defineComponent({
  components: {
    HldAvatar: Avatar,
  },
  setup() {
    const config = genConfig({ bgColor: '#000' });

    return {
      config,
    };
  },
});
</script>

Options

The options can be passed into genConfig or as Vue props.

key type default accept tips
bgColor string
hatColor string
faceColor string
hairColor string
shirtColor string
hairColorRandom boolean false
sex string male, female
earSize string small, big
eyeType string circle, oval, smile
hatType string none, beanie, turban
hairType string normal, thick, mohawk, femaleLong, femaleShort
noseType string short, long, round
mouthType string laugh, smile, peace
shirtType string hoody, short, polo
glassesType string none, round, square
shape string circle circle, rounded, square

License

Released under MIT by @wjq990112.