GithubHelp home page GithubHelp logo

miguelcobain / initials-avatar Goto Github PK

View Code? Open in Web Editor NEW

This project forked from freshbooks/initials-avatar

0.0 1.0 0.0 2.23 MB

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

License: MIT License

JavaScript 87.49% HTML 12.31% CSS 0.20%

initials-avatar's Introduction

        ___
     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.

initials-avatar's People

Contributors

adampetrie avatar alexbaizeau avatar antonnguyen avatar blagh avatar calvin-fb avatar calvinlough avatar danielchanja avatar dependabot-preview[bot] avatar ember-tomster avatar f3ndot avatar k-fish avatar kategengler avatar loganrosen avatar markstory avatar mattmcmanus avatar miguelcobain avatar skaasten avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.