Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

avvvatars-vue

Package Overview
Dependencies
Maintainers
2
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

avvvatars-vue

generates unique placeholder avatars with either characters or shapes for your vue project

  • 1.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
978
increased by1.45%
Maintainers
2
Weekly downloads
 
Created
Source

@productdevbook/avvvatars

npm version npm npm bundle size npm

Main Repository - Avvvatars

Avvvatars

Beautifully crafted unique avatar placeholder for your next vue project

Lightweight and customizable ❤️

https://user-images.githubusercontent.com/1702215/158075475-c23004ab-827a-45ad-bdba-aee29ac5b582.mp4

Live Demo 🧩 | Website 🧘‍♀️

Built by Nusu Alabuga and Oguz Yagiz Kara

Vue3 Converted by Fatih Yildiz

🙏 Special thanks to Monika Michalczyk for awesome shapes 🙏

Installation

With pnpm

pnpm i avvvatars-vue

With yarn

yarn add avvvatars-vue

With npm

npm install avvvatars-vue

Getting Started

Import Avvvatars to your app, then use it anywhere you want.

import { Avvvatars } from 'avvvatars-vue'
import 'avvvatars-vue/style'

Customization

value: string

This is required for plugin to work, each value generates a random avatar to unique to this value, so each time plugin renders, you will get the same results.

<Avvvatars value="best_user@gmail.com" />

display-value?: string

Override default text by providing display-value

for example if you provide value=”best_user@gmail.com” the character output will be the first 2 letters of value which is “BE”, if you pass displayValue=”BU” you can override it to BU

<Avvvatars value="best_user@gmail.com" display-value="BE" />

variant?: character | shape (default character)

Use shape or character as avatar.

<Avvvatars value="best_user@gmail.com" variant="character" />

size?: number (default 32)

Override default size (32px) by providing a number.

<Avvvatars value="best_user@gmail.com" :size="32" />

shadow?: boolean (default false)

Enable shadow around the avatar.

<Avvvatars value="best_user@gmail.com" :shadow="false" />

radius?: number (default size)

Override the radius of the avatar, it takes size by default to always turn it to a circle

<Avvvatars value="best_user@gmail.com" :radius="10" />

border?: boolean (default false)

Toggle border

<Avvvatars value="best_user@gmail.com" border="false" />

border-size?: number (default 2)

Override border width

<Avvvatars value="best_user@gmail.com" border-size="2" />

border-color?: string (default #fff)

Override border color

<Avvvatars value="best_user@gmail.com" border-color="#fff" />

Sponsors

sponsors

License

MIT

Keywords

FAQs

Package last updated on 07 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc