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:

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

CDN:

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

Props

Props:

• size: number
  • Default: 40
  • Determines the size of the Avatar.
• square: boolean
  • Default: false
  • Whether the Avatar is shaped as a square or circle (default).
• title: boolean
  • Default: false
  • Whether to generate the <title> element or not.
• name: string
  • Default: "Clara Barton"
  • Name that determines the pattern of the Avatar, and appears in the <title> element if title is true.
• variant: string
  • Accepts either of the following: "bauhaus", "beam", "marble", "pixel", "ring", "sunset".
  • Default: "marble"
  • Determines the variant of the Avatar.
• colors: string[]
  • Accepts a string of colors.
  • Default: ["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"]
  • Determines the range of colors in the Avatar.
• id: string
  • ID for the SVG element.

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 :size="80" variant="bauhaus" name="Mujahid Anuar" :colors="colors" />
3</template>
4
5<script>
6import Avatar from "vue-boring-avatars";
7
8export default {
9  data() {
10    return {
11      colors: ["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"],
12    };
13  },
14  components: {
15    Avatar,
16  },
17};
18</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
7    :size="size"
8    variant="beam"
9    :name="name"
10    :square="true"
11    :title="true"
12  />
13  <Avatar :size="size" variant="marble" :name="name" />
14  <Avatar
15    :size="size"
16    variant="pixel"
17    :name="name"
18    :square="true"
19    :title="true"
20  />
21  <Avatar :size="size" variant="ring" :name="name" />
22  <Avatar
23    :size="size"
24    variant="sunset"
25    :name="name"
26    :square="true"
27    :title="true"
28  />
29</template>
30
31<script lang="ts">
32import { defineComponent, ref } from "vue";
33import Avatar from "vue-boring-avatars";
34
35export default defineComponent({
36  name: "App",
37  setup() {
38    const name = ref("Clara Barton");
39    const size = ref(80);
40
41    return {
42      name,
43      size,
44    };
45  },
46  components: {
47    Avatar,
48  },
49});
50</script>

Development

1pnpm i # install packages
2pnpm dev # launch in browser
3pnpm test # run tests (download react-boring-avatars, lint, type check, then run tests)
4pnpm build # build the dist

Credits

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