https://github.com/wjq990112/holiday-avatar
English | 简体中文
holiday-avatar
Introduction
Vue library for generating nice user avatar. (Inspired by react-nice-avatar)
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent