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

vue-avatar

Package Overview
Dependencies
Maintainers
2
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-avatar

Avatar component for Vue.js

  • 2.3.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
10K
decreased by-0.92%
Maintainers
2
Weekly downloads
 
Created
Source

vue-avatar

Build Status

An avatar component for vue.js.

This component display an avatar image and if none is provided fallback to the user initials. This component is highly inspired from react-user-avatar.

Rules used to compute user initials:

  • divide the username on space and hyphen
  • use the first letter of each parts
  • never use more than three letters as initials
  • if the username is divided in more than three parts and has part starting with an uppercase, skip parts starting with a lowercase.

You can find a few examples and the documentation here

Installation

npm install vue-avatar

Version

Vuejs versionvue-avatar version
^1.0.18^1.3.0
^2.0.0^2.0.0

Usage

vue-avatar is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. When in non-modular environment, Avatar will be registered as a global variable.

ES6


import Avatar from 'vue-avatar'

export default {
  ...
  components: {
    Avatar
  },
  ...
}

After that, you can use it in your templates:

<avatar username="Jane Doe"></avatar>

CommonJS

var Vue = require('vue')
var Avatar = require('vue-avatar')

var YourComponent = Vue.extend({
  ...
  components: {
    'avatar': Avatar.Avatar
  },
  ...
})

Browser

<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-avatar/dist/vue-avatar.min.js"></script>

new Vue({
  ...
  components: {
    'avatar': VueAvatar.Avatar
  },
  ...
})

Props

NameRequiredDefaultTypeDescription
username N - String The user name that will be used to compute user initial.
initials N - String Force the displayed initials by overriding the computed ones.
inline N false Boolean Uses inline-flex instead of flex
src N - String Path to the avatar image to display.
:customStyle N - Object A custom style object to override the base styles.
backgroundColor N - String The avatar background color to use if no image is provided. If none is specified, a background color will be picked depending on the user name length.
color N - String The font color used to render the user initials. If none is provided, the background color is used to compute the font color.
:lighten N 80 Number A factor by which the background color must be lightened to produce the font color. Number between [-100,100].
:size N 50 Number The avatar size in pixel.
:rounded N true Boolean True if the avatar must be rounded.
:parser N [getInitials()](https://github.com/eliep/vue-avatar/blob/master/src/Avatar.vue#L8-L27) Function Custom parser to manipulate the string (the parser takes 2 params: a String and the default parser). It must return a String.

Event

NameArgumentsDescription
@avatar-initialsusername (the value of the username props), initials (the value of the computed initials or the initials props if any)This event is trigger when the component is ready with component username and initial.

Build Setup

# install dependencies
npm install

# serve gh pages with hot reload at localhost:8080/gh-pages/index.html
npm run dev

# build
npm run bundle

Test

npm test

License

Released under the MIT License.

Keywords

FAQs

Package last updated on 07 Nov 2020

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