holiday-avatar

holiday-avatar

Introduction

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

Online Editor / Preview

• https://nice-avatar.chilllab.io/

Assets

• Designer: @Micah on Figma
• Figma Files: Avatar Illustration System

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.

License

Released under MIT by @wjq990112.