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:
pnpm i vue-boring-avatars
yarn add vue-boring-avatars
npm install vue-boring-avatars
CDN:
<script type="module">
import Avatar from "https://unpkg.com/vue-boring-avatars/dist/vue-boring-avatars.js";
</script>
<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
Usage
Basic usage (with default props):
<template>
<Avatar />
</template>
<script>
import Avatar from "vue-boring-avatars";
export default {
components: {
Avatar,
},
};
</script>
Basic usage with <script setup>
(with default props):
<script setup>
import Avatar from "vue-boring-avatars";
</script>
<template>
<Avatar />
</template>
With props:
<template>
<Avatar :size="80" variant="bauhaus" name="Mujahid Anuar" :colors="colors" />
</template>
<script>
import Avatar from "vue-boring-avatars";
export default {
data() {
return {
colors: ["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"],
};
},
components: {
Avatar,
},
};
</script>
With Composition API:
<template>
<input type="text" v-model="name" />
<input type="number" v-model.number="size" />
<Avatar :size="size" variant="bauhaus" :name="name" />
<Avatar
:size="size"
variant="beam"
:name="name"
:square="true"
:title="true"
/>
<Avatar :size="size" variant="marble" :name="name" />
<Avatar
:size="size"
variant="pixel"
:name="name"
:square="true"
:title="true"
/>
<Avatar :size="size" variant="ring" :name="name" />
<Avatar
:size="size"
variant="sunset"
:name="name"
:square="true"
:title="true"
/>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import Avatar from "vue-boring-avatars";
export default defineComponent({
name: "App",
setup() {
const name = ref("Clara Barton");
const size = ref(80);
return {
name,
size,
};
},
components: {
Avatar,
},
});
</script>
Development
pnpm i
pnpm dev
pnpm test
pnpm build
Credits
Credits to @hihayk (GitHub) and @josep_martins (GitHub) for creating the original Boring Avatars library at boringdesigners!