vue-boring-avatars

vue-boring-avatars is a Vue 3 port of Boring Avatars, a JS library that generates custom, SVG-based avatars from any username and color palette.

Features

• Supports Vue 3 (for Vue 2, look at this implementation).
• Built using TypeScript and comes with TS types.
• Similar API with the React version of Boring Avatars.

Installation

NPM:

1yarn add vue-boring-avatars
2
3# or
4
5npm install vue-boring-avatars

CDN:

1<!-- UMD version -->
2<script src="https://unpkg.com/vue-boring-avatars/dist/vue-boring-avatars.umd.js"></script>
3
4<!-- ESM version -->
5<script type="module">
6  import Avatar from 'https://unpkg.com/vue-boring-avatars/dist/vue-boring-avatars.es.js'
7</script>                                                                    

Props

Props:

• size: number
  • Default: 40
• square: boolean
  • Default: false
• name: string
  • Default: "Clara Barton"
• variant: string
  • Accepts either of the following: "bauhaus", "beam", "marble", "pixel", "ring", "sunset".
  • Default: "marble"
• colors: string[]
  • Accepts a string of colors.
  • Default: ["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"]

Usage

Basic usage (with default props):

1<template>
2  <Avatar />
3</template>
4
5<script>
6import Avatar from "vue-boring-avatars";
7
8export default {
9  components: {
10    Avatar,
11  },
12});
13</script>

Basic usage with <script setup> (with default props):

1<script setup>
2import Avatar from "vue-boring-avatars";
3</script>
4
5<template>
6  <Avatar />
7</template>

With props:

1<template>
2  <Avatar 
3    :size="80" 
4    variant="bauhaus"
5    name="Mujahid Anuar" 
6    :colors="colors" 
7  />
8</template>
9
10<script>
11import Avatar from "vue-boring-avatars";
12
13export default {
14  data() {
15    return {
16      colors: ["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"]
17    }
18  },
19  components: {
20    Avatar,
21  },
22});
23</script>

With Composition API:

1<template>
2  <input type="text" v-model="name" />
3  <input type="number" v-model.number="size" />
4
5  <Avatar :size="size" variant="bauhaus" :name="name" />
6  <Avatar :size="size" variant="beam" :name="name" :square="true" />
7  <Avatar :size="size" variant="marble" :name="name" />
8  <Avatar :size="size" variant="pixel" :name="name" :square="true" />
9  <Avatar :size="size" variant="ring" :name="name" />
10  <Avatar :size="size" variant="sunset" :name="name" :square="true" />
11</template>
12
13<script lang="ts">
14import { defineComponent, ref } from "vue";
15import Avatar from "vue-boring-avatars";
16
17export default defineComponent({
18  name: "App",
19  setup() {
20    const name = ref("Clara Barton");
21    const size = ref(80);
22
23    return {
24      name,
25      size,
26    };
27  },
28  components: {
29    Avatar,
30  },
31});
32</script>

Credits

Credits to @hihayk (GitHub) and @josep_martins (GitHub) for creating the original Boring Avatars library at boringdesigners!