Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/trunda/avatio-avatar

VueJS component to display SVG avatars.
https://github.com/trunda/avatio-avatar

avatar avatar-component avatar-generator component svg svg-avatar vuejs

Last synced: about 1 month ago
JSON representation

VueJS component to display SVG avatars.

Lists

README 

        
# Avatio Avatar



VueJS 2 component to display SVG avatar.






Vector graphic is designed by [Teneresa](https://github.com/teneresa) - and therefore I ow her a big thank you!



Inspiration came from [Avataaars](https://github.com/fangpenlin/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



```bash

yarn add avatio-avatar

```



Then you can use the component



```javascript

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



const app = new Vue({

    components: {Avatar},

    template: ``,

    data: {

        config: Config['Female'],

        options: {

          FemaleGlasses: {

            color: "#fff",

            type: "B",

          },

          //...

        },

    }

});



```



## Configuration



All component is dynamical and is generated by configuration, [take a look](https://github.com/trunda/avatio-avatar/blob/master/src/avatio.js).

By this mechanism is easily extensible and config is used to generate [UI of avatar generator](https://github.com/trunda/avatio-ui).



## Building 



If you want to build the package, you can run



```bash

yarn build

```