trunda / avatio-avatar

VueJS component to display SVG avatars.

Home Page:https://avatio.cool

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Avatio Avatar

VueJS 2 component to display SVG avatar.

Vector graphic is designed by Teneresa - and therefore I ow her a big thank you!

Inspiration came from Avataaars, which is similar project focusing on React.

Features

  • SVG
  • Configurable
  • Extensible

How to use

At first you have to install package by yarn or npm like so

yarn add avatio-avatar

Then you can use the component

import Avatar, {Config} from 'avatio-avatar';

const app = new Vue({
    components: {Avatar},
    template: `<avatar :config="config" :options="options"></avatar>`,
    data: {
        config: Config['Female'],
        options: {
          FemaleGlasses: {
            color: "#fff",
            type: "B",
          },
          //...
        },
    }
});

Configuration

All component is dynamical and is generated by configuration, take a look. By this mechanism is easily extensible and config is used to generate UI of avatar generator.

Building

If you want to build the package, you can run

yarn build

About

VueJS component to display SVG avatars.

https://avatio.cool


Languages

Language:Vue 83.8%Language:JavaScript 16.2%