holiday-avatar v0.0.5
holiday-avatar
Introduction
Vue library for generating nice user avatar. (Inspired by react-nice-avatar)
Online Editor / Preview
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.
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.
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago