Skip to content

Generate an avatar based on a person's first name, last name, and company name

License

Notifications You must be signed in to change notification settings

freshbooks/initials-avatar

Repository files navigation

        ___
     o$"""""$o   
   o$"       "$o
  o$  .   .    $o   . .    . ___ .   .   .    __      . .    . .  ___  .    __
 o$   |  /_\    $o  | |\ | |  |  |  /_\  |   '--.    /_\ \  / /_\  |  /_\  |__)
 o$   | /   \   $o  | | \| |  |  | /   \ |__ \__/   /   \ \/ /   \ | /   \ |  \
  o$           $o        
   o$         $o
     '"+$$$+"'

Build Status

An Ember CLI Addon that generates an avatar based on the initials of someone with a first and last name.

Installation

ember install initials-avatar

Usage

Initials-avatar is intended to be a "default" avatar when an actual image is not present.

If neither first or last names are present, a single initial for the company will be displayed:

{{initials-avatar
  firstName=userGivenName
  lastName=userFamilyName
  company=userCompany
  email=userEmail
  image=userProfileImageUrl
}}

There are also color classes that you can leverage to control the styling of your different initials avatars:

{{initials-avatar
  firstName=userGivenName
  lastName=userFamilyName
  company=userCompany
  email=userEmail
  image=userProfileImageUrl
  colorIndex=userid
  maxColorIndex=3 {{!-- you only have 3 color classes defined --}}
}}

You can use a background-color directly you can pass in a color property. This is useful if you want to generate colors from unique strings like emails or ids. This background-color style will only be applied if image is a "falsy" value:

{{initials-avatar
  firstName=userGivenName
  lastName=userFamilyName
  company=userCompany
  email=userEmail
  color="#f6f8fa"
}}

Updating to 1.x

Contributing

Installation

  • git clone <repository-url> this repository
  • cd initials-avatar
  • npm install

Running

Running Tests

  • ember test – Runs the test suite on the current Ember version
  • ember test --server – Runs the test suite in "watch mode"
  • ember try:each – Runs the test suite against multiple Ember versions

Building

  • ember build

For more information on using ember-cli, visit https://ember-cli.com/.

License

This project is licensed under the MIT License.